Description: Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.
handler(eventObject)A function to execute each time the event is triggered.
This method is a shortcut for .bind('dblclick', handler)
in the first variation, and .trigger('dblclick')
in the second.
The dblclick
event is sent to an element when the element is double-clicked. Any HTML element can receive this event.
For example, consider the HTML:
<div id="target"> Double-click here </div> <div id="other"> Trigger the handler </div>
The event handler can be bound to any <div>
:
$('#target').dblclick(function() { alert('Handler for .dblclick() called.'); });
Now if we double-click on this element, the alert is displayed:
Handler for .dblclick() called.
We can also trigger the event when a different element is clicked:
$('#other').click(function() { $('#target').dblclick(); });
After this code executes, (single) clicks on Trigger the handler will also alert the message.
The dblclick
event is only triggered after this exact series of events:
It is inadvisable to bind handlers to both the click
and dblclick
events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click
events and others only one. If an interface that reacts differently to single- and double-clicks cannot be avoided, then the dblclick
event should be simulated within the click
handler. We can achieve this by saving a timestamp in the handler, and then comparing the current time to the saved timestamp on subsequent clicks. If the difference is small enough, we can treat the click as a double-click.
$("p").dblclick( function () { alert("Hello World!"); });
<!DOCTYPE html>
<html>
<head>
<style>
div { background:blue;
color:white;
height:100px;
width:150px;
}
div.dbl { background:yellow;color:black; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div><span>Double click the block</span>
<script>
var divdbl = $("div:first");
divdbl.dblclick(function () {
divdbl.toggleClass('dbl');
});
</script>
</body>
</html>