Double click event to trigger script execution

Double Click Event using JQUERY

Double Click event is created when we click Mouse button twice successively over the element

Here is the syntax

$("element").dblclick(function(){
.....
})

Here is the code to show how to execute double click of a button.


<script>
$(document).ready(function() {

$("#b1").dblclick(function(){
$("#t1").html('You Double clicked the button');
});

})
</script>

Double Click event and common class

If we have set of buttons with same class then we can apply double click event to the class. This way we can execute common code for all the buttons having same class.

<script>
$(document).ready(function() {
$(".edit_class").dblclick(function(){
/// your code for click event here ///
});
})
</script>

Once the event is fired then we can find out which button is clicked by the user.

<script>
$(document).ready(function() {
$(".edit_class").dblclick(function(){
var id = $(this).attr('id');});
})
})
</script>

Other event along with double click

We can trigger common code to execute by adding other events to double click event. We may want to execute same code for single click or double click event.

$('#b1').bind('click dblclick', function(){
// Your code here
});

How to identify which event has triggered ?

$("#b1").on('dblclick click',function(e){
$("#t1").html('Your type of Click event  : '+e.type);
});

Video Tutorial on Mouse Events

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Double Click Event using JQUERY

Double Click event and common class

Other event along with double click

Video Tutorial on Mouse Events

Subscribe

1

2

3

4