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.

Learn jQuery
Introduction
Selectors
Events
Event Methods
Download
Callback
Chaining
Get and Set
Add Element
Remove Element
Traverse
Parent
Children
Sibling Traverse
Filtering
jQuery AJAX
Effects
Show and Hide
Fade Effect
Slide Effect
Animate Effect
Manipulate CSS
Width and Height
.addClass()
.after()
.animate()
.append()
.appendTo()
.attr()
.before()
.bind() (deprecated)
.blur()
.change()
.click()
.clone()
.css()
.dblclick()
.delay()
.delegate() and .undelegate() (deprecated)
.detach()
.empty()
.end()
.error() (deprecated)
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
.finish()
.focus()
.focusIn()
.focusOut()
.hasClass()
.height()
.hide()
.hover()
.html()
.innerHeight()
.innerWidth()
.insertAfter()
.insertBefore()
.keypress()
.keyup()
.live() and .die() (deprecated)
.load() (deprecated)
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
.off()
.offset()
.offsetParent()
.on()
.one()
.outerHeight()
.outerWidth()
.position()
.prepend()
.prependTo()
.prop()
.proxy()
.queue()
.ready()
.remove()
.removeAttr()
.removeClass()
.removeProp()
.replaceAll()
.replaceWith()
.resize()
.scroll()
.scrollLeft()
.scrollTop()
.show()
.slideDown()
.slideToggle()
.slideUp()
.stop()
.submit()
.text()
.toggle()
.toggleClass()
.trigger()
.triggerHandler()
.unbind() (deprecated)
.unload() (deprecated)
.unwrap()
.val()
.width()
.wrap()
Event Properties
event.currentTarget
event.preventDefault()
event.relatedTarget
event.stopImmediatePropagation()
event.stopPropagation()
event.target
event.timeStamp
event.type
event.which
jQuery .find()
jQuery .keydown()
jQuery.noConflict()
pageY and pageX