Quick Reach
What is the jQuery double click() method
The double click event occurs when an element of HTML document is clicked.
How to use it?
Following is the general syntax of using the double click method:
$(selector).dblclick(function)
Where the function is optional. It runs as the double click event occurs.
e.g.
$(“p”).dblclick(function)
$(“div”).dblclick(function)
$(“button”).dblclick(function)
Below are running examples of the dblclick() method with different HTML elements
Example of dblclick() with Paragraph
In the following example, as the first paragraph is clicked it will trigger an event handler that will show an alert. The click method is attached with the clickme id.
Copy and paste code into HTML file and run in your browser.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<head>
<title>jQuery Events</title>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function(){
$(“#Clickme”).dblclick(function(){
alert(“Paragraph with ‘Clickme’ id is double clicked”);
});
});
</script>
<style type=”text/css”>
.stylespec{
background-color:#ffffff;
width:400px;
height:50px;
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<p class=“stylespec” id=“Clickme”>Double clicking on this parapgraph will execute double click event handler! </p>
<p class=” stylespec”>Click on this paragraph will not execute event handler. </p>
</body>
</html>
|
Example of dblclick() with Div <div>
In this example, the div tags are used. As you double click the div tag, the alert will display which is associated with the dblclick() method of jQuery.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<head>
<title>jQuery Events</title>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function(){
$(“#Clickme”).dblclick(function(){
alert(“Div with ‘Clickme’ id is double clicked”);
});
});
</script>
<style type=”text/css”>
.stylespec{
background-color:#ffffff;
width:400px;
height:50px;
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<div class=“stylespec” id=“Clickme”>Double clicking on this Div will execute double click event handler! </div>
<div class=” stylespec”>Click on this Div will not execute event handler. </div>
</body>
</html>
|
You may also like: jQuery click
Leave A Comment?