Execute a script when the element is being double-clicked in HTML?

HTMLWeb DevelopmentFront End Technology

The dblclick event is triggered when a pointing device button, such as the mouse's main button, is double-clicked, or when it is quickly clicked twice on the same element in a brief period of time.

Following are the examples…

Example: Using ondblclick attribute in HTML

In the following example we are using ondblclick attribute for creating the double click event using HTML.

<!DOCTYPE html> <html> <body> <h1 id = "tutorials" ondblclick = "varma()"> HELLO EVERYONE :):) </h1> <h2> Double Click the text "HELLO EVERYONE" to see the effect. </h2> <script> function varma() { document.getElementById("tutorials").innerHTML = "WELCOME TO THE TUTORIALSPOINT.. "; } </script> </body> </html>

Output

On executing the above script it will generate the following output −

At the start, When you try to excute the code it will open up a window consisting of text “HELLO EVERYONE :):)”.

On double clicking the text “HELLO EVERYONE” our dblclick event get triggered and display a text “WELCOME TO THE TUTORIALSPOINT.”

Example: Using JavaScript

In the following example we are creating a double click event using javascript.

<!DOCTYPE html> <html> <body> <h1 id = "tutorial"> HELLO </h1> <h2> Double Click To See Effect</h2> <script> document.getElementById("tutorial").ondblclick = function() { varma()}; function varma() { document.getElementById("tutorial").innerHTML = " WELCOME TO TUTORIALSPOINT "; } </script> </body> </html>

Output

When we try to execute the script, the output window pops up, displaying the text "hello". with a prompt (double click to see the effect).

On double clicking the text "hello", the dblclick gets activated and displays the text "welcome to tutorialspoint".

Example: Using addEventListener() method

In the following example we are creating double click evet using the addeventlistener() method.

<!DOCTYPE html> <html> <body> <h1 id = "tutorial"> Hello</h1> <h2> Double Click to see effect</h2> <script> document.getElementById("tutorial").addEventListener("dblclick", varma); function varma() { document.getElementById("tutorial").innerHTML = " WELCOME TO TUTORIALSPOINT "; } </script> </body> </html>

Output

On executing the above script, it will display the text "hello" attached with a prompt(double click to see effect)

On double clicking the text "hello", the event will come into play and display the text "welcome to tutorialspoint".

raja
Updated on 05-Sep-2022 13:12:14

Advertisements