MouseUp and DoubleClick both attached to seperate event handling functions using Backbone js

Question

I have a chart application wherein I use Backbone.js to attach seperate handlers for mouseup and doubleclick events over different "area" of chart image.

I require mouseup to detect whether user clicked left button or right on the "area" part of chart image and depending on that I am redirecting my flow. Also I require doubleclick to enlarge or minimize my panel containing the chart image.

Here is the issue.. Since each doubleclick implicitly calls mouseup, I am getting my maximise/minimize functionality interfere with the left/right button click functions.

I tried using various techniques like timeout to check if single mouse up is followed by doubleclick (as suggested in following thread: Need to cancel click/mouseup events when double-click event detected

It did not work for me. Also I have different objects of the view containing the chart on same page so I am attaching unique ID with every event handler to differentiate them I also tried the simple flag set reset method to detect double click and prevent mouseup if double click occured but since in the event hierarchy the mouseup occurs before doubleclick, that failed too.

All in all, Please Help! Thanks in advance

Answer 1

Following the advice given in the answer you linked, you just have to debounce the callback for a mouseup and check if a second click occurs in a given period.

Assuming a view defined in this manner (http://jsfiddle.net/nikoshr/4KSZx/)

var V = Backbone.View.extend({
    events: {
        'mouseup button': 'onmouseup',
        'dblclick button': 'ondblclick'
    },

    onmouseup: function() {
        console.log('mouseup');
    },    
    ondblclick: function() {
        console.log('dblclick');
    }
});

you could modify it and "cancel" the mouseup event:

var V = Backbone.View.extend({
    events: {
        'mouseup button': _.debounce(function(e) {
            if (this.doucleckicked) {
                this.doucleckicked = false;
            } else {
                this.onmouseup.call(this, e);
            }
        }, 300),
        'dblclick button': function(e) {
            this.doucleckicked = true;
            this.ondblclick.call(this, e);
        }
    },

    onmouseup: function() {
        console.log('mouseup');
    },    
    ondblclick: function() {
        console.log('dblclick');
    }
});

And a demo http://jsfiddle.net/4KSZx/6/