How to differentiate single click event and double click event?

Instead of utilizing more ad-hoc states and setTimeout, turns out there is a native property called detail that you can access from the event object!

element.onclick = event => {
   if (event.detail === 1) {
     // it was a single click
   } else if (event.detail === 2) {
     // it was a double click
   }
};

Modern browsers and even IE-9 supports it 🙂

Source: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail