jQuery | dblclick() with Examples

Last Updated : 12 Feb, 2019

The dblclick() is an inbuilt method in jQuery which is used to trigger the double-click event to occur. This method occurs when the selected element will be double clicked.
Syntax:

$(selector).dblclick(args);

Here “selector” is the selected element.
Parameter: It accepts an optional parameter “args” which specifies a function that do a specific task after double clicking.
Return Value: It returns some function when the selected element is double-clicked.

jQuery code to show the working of dblclick() method:
Code #1:
In the below code, no function is passed to this method.

<html>
  
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/
                  jquery/3.3.1/jquery.min.js"></script>
    <script>
        <!-- jQuery code to show dbclick method -->
        $(document).ready(function() {
                    $("div").click(function() {
                        $("div").dblclick();
                    });
    </script>
    <style>
        div {
            display: block;
            width: 370px;
            padding: 10px;
            font-size: 25px;
            border: 2px solid green;
        }
    </style>
</head>
  
<body>
    <!-- click on this div and a pop will appear -->
    <div ondblclick="alert('dblclick event has been triggered')
                 ">Click me to trigger dblclick event</div>
</body>
  
</html>

Output:
Before double clicking the “Click me to trigger dblclick event” button-

After double clicking the “Click me to trigger dblclick event” button-

Code #2:
In the below code, function is passed to dblclick() method.

<html>
  
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/
    jquery/3.3.1/jquery.min.js"></script>
    <script>
        <!-- jQuery code to show dbclick method -->
        $(document).ready(function() {
            $("button").dblclick(function() {
                $("p").fadeOut();
            });
        });
    </script>
    <style>
        p {
            display: block;
            padding: 20px;
            color: gree;
            width: 300px;
            border: 2px solid green;
            font-size: 25px;
        }
    </style>
</head>
  
<body>
    <p>Welcome to GeeksforGeeks !</p>
    <!-- click on this button and above paragraph 
            will disappear -->
    <button> Click Me! </button>
</body>
  
</html>