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

Question

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 1

The jQuery documentation specifically recommends against what you're doing:

It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.

What you're seeing is exactly what is expected (depending on the browser of course). The only way around your problem is to set a timer and manually differentiate between a single- and double-click yourself; then you'll have to adjust the timer value and check various browsers and operating systems until you get something that sort of pretends to work in most place.

I'd strongly recommend that you use separate controls with single-click actions instead. Double-click is pretty unfriendly period and we only put up with it because we're used to it.