Menu Close

Jquery dblclick() method

Priyanka
dbclick

It is a commonly used jQuery event method. This method triggers a double-click event when the user double-clicks the html element.

Syntax:

$(selector).dblclick(function);

Here, selector is the selected element and function is the optional one. This specifies a function that does a specific task after double clicking.

Example 1:

In this example, we will use the dbclick() method directly without passing the function after the event is triggered.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Jquery dbclick() method</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script> 
        $(document).ready(function(){
            $("p").dblclick(function(){
                alert("This paragraph was clicked."); 
            });
        }); 
    </script>
</head>
<body>
    <p>Click on the text.</p>   
</body>
</html>

Example 2:

Here, we will pass the function to the dbclick() method. It will show the action after the event is triggered.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Jquery dbclick() method</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script> 
        $(document).ready(function () {
                $("button").dblclick(function () {
                    $("p").fadeOut();
                });
            }); 
    </script>
    <style>
        p {
            font-size: 30px;
            display: block;
            padding: 20px;
            color: #ff0000;
            border: 1px solid #0000ff;
            width: 400px;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>The paragraph will disappear</p>
    <!-- Double click on this button. The paragraph will disappear -->
    <button> Click Me! </button>  
</body>
</html>
Popular Posts
Total Views: 102
Posted in jQuery, Web Technologies
Tagged , , , ,

You can also read...