revision:
This attribute fires on a mouse double-click on the element.
Supported HTML tags: all HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>
<element ondblclick="script"></element>
script: the script to be run on ondblclick.
A function is triggered when the button is double-clicked. The function outputs some text in a p element with id="demo".
<button style="margin-left:3vw;" ondblclick="clickTwice()">Double-click me</button>
<p class="spec" id="demo" style="color:red"></p>
<p class="spec">A function is triggered when the button is double-clicked.
The function outputs some text in a p element with id="demo".</p>
<script>
function clickTwice() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
Field1:
Field2:
A function is triggered when the button is double-clicked. The function copies the text from Field1 into Field2.
<p class="spec">Field1: <input type="text" id="field1" value="Hello World!"></p>
<p class="spec">Field2: <input type="text" id="field2"></p><br>
<button style="margin-left:3vw;" ondblclick="clickAgain()">Copy Text</button>
<p class="spec">A function is triggered when the button is double-clicked.
The function copies the text from Field1 into Field2.</p>
<script>
function clickAgain() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
code:
<div>
<button id="doubleClickButton">Double-click me!</button>
<p id = "output1"></p>
</div>
<style>
#doubleClickButton{ color: red; text-transform: uppercase; }
</style>
<script>
const doubleClickButton = document.getElementById('doubleClickButton');
const outputDiv1 = document.getElementById("output1");
doubleClickButton.addEventListener('dblclick', function(event) {
outputDiv1.innerHTML += 'Double-clicked!' + JSON.stringify(event) + "<br>";
});
</script>