Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM ondblclick Event

  • Last Updated : 28 Jun, 2019
Geek Week

The HTML DOM ondblclick event occurs on a double click by the user.

All HTML elements are supported with ondblclick Event, EXCEPT:

  • <bdo>
  • <br>
  • <base>
  • <head>
  • <html>
  • <iframe>
  • <meta>
  • <param>
  • <script>
  • <style>
  • <title>.

Syntax:
In HTML:

<element ondblclick="myScript">

In JavaScript:

object.ondblclick = function(){myScript};

In JavaScript, using the addEventListener() method:



object.addEventListener("dblclick", myScript);

Example 1: Using HTML




<!DOCTYPE html>
<html>
  <head>
    <title>HTML DOM ondblclick Event</title>
  </head>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <h2>HTML DOM ondblclick Event</h2>
        <p id="demo"
           ondblclick="myFunction()">
            Double-click
        </p>
  
        <script>
            function myFunction() {
                document.getElementById(
                    "demo").innerHTML = "GeeksforGeeks";
            }
        </script>
    </center>
</body>
  
</html>

Output:
Before:

After:

Example: Using JavaScript




<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM ondblclick Event</title>
</head>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <h2>HTML DOM ondblclick Event</h2>
        <p id="demo">Double-click me.</p>
  
        <script>
            document.getElementById(
              "demo").ondblclick = function() {
                GFGfun()
            };
  
            function GFGfun() {
                document.getElementById(
                  "demo").innerHTML = "GeeksforGeeks";
            }
        </script>
    </center>
  
</body>
  
</html>

Output:
Before:

After:

Example: In JavaScript, using the addEventListener() method:




<!DOCTYPE html>
<html>
  
<head>
    <title>HTML DOM ondblclick Event</title>
</head>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <h2>HTML DOM ondblclick Event</h2>
        <p id="demo">Double-click me.</p>
  
        <script>
            document.getElementById(
              "demo").addEventListener(
              "dblclick", GFGfun);
  
            function GFGfun() {
                document.getElementById(
                  "demo").innerHTML = "GeeksforGeeks";
            }
            
        </script>
    </center>
</body>
  
</html>

Output:
Before:

After:

Supported Browsers: The browsers supported by ondblclick Event are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :