How to Detect Double Clicks With Vanilla JavaScript

To detect double clicks with JavaScript you can use the event listener dblclick.

In the example below we listen to double clicks on the window object, which means that if you double click with your mouse fast anywhere inside your webpage, it gets detected:

window.addEventListener("dblclick", event => {
  console.log("Double-click detected")
  // Double-click detected
})

You can also attach the dblclick event listener to a DOM element, like a button:

<button id="button">Double click me!</button>

const button = document.getElementById("button")

button.addEventListener("dblclick", event => {
  console.log("Double-click detected")
  // Double-click detected
})

The dblclick event is supported in all modern browsers for desktop/laptops, even Internet Explorer 11.

Unfortunately, it’s not supported on all mobile devices, yet. Check out Mozilla’s compatibility table overview.