JavaScript dblclick Event

The dblclick event in JavaScript is triggered when a user double-clicks on an HTML element. It is commonly used to execute a function or trigger specific actions in response to user interaction.

Syntax

Now, we see the syntax of creating double click event in HTML and in javascript (without using addEventListener() method or by using the addEventListener() method).

In HTML


<element ondblclick = "fun()">

In JavaScript


object.ondblclick = function() { myScript };

Key Features of dblclick Event:

Example - Using ondblclick attribute in HTML

In this example, we are creating the double click event using the HTML ondblclick attribute.

Example 1


 
 <!DOCTYPE html>  
 <html>  
 <head>  
 </head>  
 
 <body>  
     <h1 id="heading" ondblclick="fun()"> Hello world :):) </h1>  
     <h2> Double Click the text "Hello world" to see the effect. </h2>  
     <p> This is an example of using the <b> ondblclick </b> attribute. </p>  
     <script>  
         function fun() {  
             document.getElementById("heading").innerHTML = " Welcome to the javaTpoint.com ";  
         }  
     </script>  
 </body>  
 </html>

After the execution of the above code, the output will be -

Output

After double-clicking the text"Hello world", the output will be -

Output

Example - Using JavaScript

Example 2


<!DOCTYPE html>  
<html>  
<head>  
</head>  
  
<body>  
    <h1 id="heading"> Hello world :):) </h1>  
    <h2> Double Click the text "Hello world" to see the effect. </h2>  
    <p> This is an example of creating the double click event using JavaScript. </p>  
    <script>  
        document.getElementById("heading").ondblclick = function() { fun() };  
        function fun() {  
            document.getElementById("heading").innerHTML = " Welcome to the javaTpoint.com ";  
        }  
    </script>  
</body>  
  
</html>

Output

After double-clicking the text "Hello world", the output will be -

Output

Example - Using JavaScript's addEventListener() method

Example 3


<!DOCTYPE html>  
<html>  
<head>  
</head>  

<body>  
    <h1 id="heading"> Hello world :):) </h1>  
    <h2> Double Click the text "Hello world" to see the effect. </h2>  
    <p> This is an example of creating the double click event using the <b> addEventListener() method </b>. </p>  
    <script>  
        document.getElementById("heading").addEventListener("dblclick", fun);  
        function fun() {  
            document.getElementById("heading").innerHTML = " Welcome to the javaTpoint.com ";  
        }  
    </script>  
</body>  

</html>

Output

After double-clicking the text "Hello world", the output will be -

Output