Teach with us

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
Yaswanth Verma
Updated on 05-Sep-2022 13:12:14

Previous Page Print Page Next Page  
Advertisements