How to use dblclick() Method event in jQuery

This article describe about dblclick() Method event in jQuery.
  • 2309

jQuery Event dblclick() Event

When double clicked on the selected element then dblclick event occurs.

The dblclick() triggers the dblclick event, to run when a dblclick event occurs.

Note: click event and dblclick event cause problem, if both apply on the same element.

Example:

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("button").dblclick(function () {

            $("p").slideToggle();

        });

    });

</script>

</head>

<body>

<p>This is a my paragraph.</p>

<button>Double-click me</button>

</body>

</html>

 

Output


dblclick event pic10.jpg


Trigger the dblclick Event

 

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("button").dblclick(function () {

            $("p").slideToggle();

        });

        $("p").click(function () {

            $("button").dblclick();

        });

    });

</script>

</head>

<body>

<button>Double click to toggle</button>

<p>Also Click this paragraph to trigger the dblclick event for the button.</p>

</body>

</html>

 

Output


dblclick event pic11.jpg

 

Bind a Function to the dblclick Event

 

This function run when the dblclick event occur on the selected item.

 

Syntax

 

$(selector).dblclick(function)

 

You may also want to read these related articles Click here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.