Seize the opportunity to gain new skills and reshape your career!

Choose a free learning path and get valuable insights from first-rate courses

Code has been added to clipboard!

Handle dblclick Event with jQuery .dblclick() Method

Reading time 1 min
Published Dec 29, 2017
Updated Oct 9, 2019

jQuery Double Click: Main Tips

  • The .dblclick() method attaches an event handler to run after the double-click event occurs, or invokes the event.
  • This method is a shortcut for using either .on() or .trigger() jQuery method with dblclick as the event parameter.

.dblclick() Explained

The jQuery .dblclick() method attaches an event handler. It is invoked when the dblclick event occurs (a selected element is double-clicked). The jQuery double click function can invoke said event as well.

In the example below, an alert will pop as you double click the image:

Example
$("img").dblclick(() => {
   alert("The image was double-clicked!");
});

This is the syntax for triggering the event with jQuery doubleclick:

$(selector).dblclick()

Now, to attach the event handler, use this type of syntax:

$(selector).dblclick(eventData, handler)

The jQuery .dblclick() method contains a selector and two parameters. The eventData is an object, holding data passed to the event handler. The event handler refers to the function to be invoked when jQuery double click event occurs.