How To Use Dblclick Event Method In JQuery With Example

Posted By Bajarangi soft , Posted On 12-10-2020

An event represents the precise moment when something happens.So today we are discussing dbl click event method injquery

How To Use Dblclick Event Method In JQuery With Example

The dblclick() method attaches an event handler function to an HTML element and the function is executed when the user double-clicks on the HTML element:

Step 1:Create index.html file and implement below code.

<p>If you do double click on me, I will Hide.</p>
<p>Click me away!</p>
<p>Click me too!</p>

Step 2:Implement jquery to use dblclick event method

<script>
    $(document).ready(function(){
        $("p").dblclick(function(){
            $(this).hide();
        });
    });
</script>

Complete Code For Dblclick Event Method

<!DOCTYPE html>
<html>
<head>
    <title>How To Use Dblclick Event Method In JQuery With Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
    body {
        background: black;
    }
</style>
<body>
<div class="container">
    <br>
    <div class="text-center">
        <h2 id="color" style="color: White">Dblclick Event Method In JQuery With Example</h2>
    </div>
    <br>
    <br>
    <div class="well">
        <p>If you do double click on me, I will Hide.</p>
        <p>Click me away!</p>
        <p>Click me too!</p>
    </div>
</div>
</body>
</html>
<script>
    $(document).ready(function(){
        $("p").dblclick(function(){
            $(this).hide();
        });
    });
</script>

Related Post