Prevent click event from firing when dblclick event fires

In a comment, you said,

I delay the click handler by 300 ms (a noticeable and annoying delay) and even ...

So it sounds like what you want is that when you click then the DOM should geneate a click event immediately, except not if the click is the first click of a double-click.

To implement this feature, when you click, the DOM would need to be able to predict whether this is the final click or whether it's the first of a double-click (however I don't think is possible in general for the DOM to predict whether the user is about to click again).

---

What are the two distinct actions which you're trying to take on click and double-click? IMO, in a normal application you might want both events: e.g. single-click to focus on an element and then double-click to activate it.

When you must separate the events, some applications use something other than double-click: for example, they use right-click, or control-click.

In case anyone else stumbles on this (as I did) looking for an answer, the absolute best solution that I could come up with is the following:

    $node.on('click',function(e){
      if(e.originalEvent.detail > 1){
         return;
        /* if you are returning a value from this
         function then return false or cancel 
         the event some other way */
      }
    });

Done. If there is more than one click back to back, the second, third,etc. will not fire. I definitely prefer this to using any sort of timers.

I got myself pointed in this direction by reading this.

---

Incidentally: I was first researching this problem because I accidentally double clicked a paginated link, and the event fired and finished twice before the callback could happen.

Before coming up with the code above, I had

 if e.originalEvent.detail === 2 //return

however, I was able to click on the link 3 times (a triple click), and though the second click didn't fire, the third did

You can use UIEvent.detail if you want to detect how many times the element was clicked and fire events based on that.

A simple example:

element.addEventListener("click", function (e) {
  if (e.detail === 1) {
    // do something if the element was clicked once.
  } else if (e.detail === 2) {
    // do something else if the element was clicked twice
  }
});