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?

Solution 1

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!

Solution 2

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.

Comments

[Veera]

hmm. I have to change my application behavior then.