Search code examples
javascriptbackbone.jsbackbone-events

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?

Solution

  • 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!