Backbone.js – Both click and double click event getting fired on an element

In my Backbone View, I have defined events like this:

events : {
  'click .elm' : 'select',
  'dblclick .elm' : 'toggle'

},

select: function(e){
    e.preventDefault();
    console.log('single clicked');
}

toggle : function(e){
    e.preventDefault();
    console.log('double clicked');
}

I have bound single and double click event listeners to same element .elm. When I double click on this element, I get this output:

single clicked single clicked double clicked

Tried preventDefault() and stopImmediatePropagation() and that didn’t solve the issue.

So, how can I prevent the single click event getting fired when I double click?

Answer

This isn’t an issue with Backbone itself. It’s about how to handle both single click and double click events on the same button.

See

1. Need to cancel click/mouseup events when double-click event detected

2. Javascript with jQuery: Click and double click on same element, different effect, one disables the other

Update: But it would be better if you didn’t have to deal with it. See mu is too short’s answer below!