MouseUp和DoubleClick都使用Backbone js附加到单独的事件处理函数

Question

我有一个图表应用程序,其中我使用Backbone.js为图表图像的不同"区域"上的鼠标和双击事件附加单独的处理程序.

我需要使用mouseup来检测用户是否在图表图像的"区域"部分单击了左键或右键,这取决于我是否重定向流程.此外,我需要双击放大或最小化包含图表图像的面板.

这是问题..由于每次双击都隐式调用mouseup,我的最大化/最小化功能会干扰左/右按钮单击功能.

我尝试使用各种技术,如超时检查是否单击鼠标后跟双击(如下面的线程所示: 当检测到双击事件时需要取消单击/鼠标事件

它对我不起作用.此外,我有不同的视图对象包含同一页面上的图表,所以我附加了每个事件处理程序的唯一ID来区分它们我还尝试了简单的标志设置重置方法来检测双击并防止鼠标,如果双击发生,但从事件层次结构鼠标在双击之前发生,也失败了.

总而言之,请帮忙!提前致谢

Answer 1

按照您链接的答案中给出的建议，您只需对 mouseup 的回调进行反跳，并检查在给定时间段内是否发生第二次单击。

假设以这种方式定义视图（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');
    }
});

您可以修改它并“取消” mouseup 事件：

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');
    }
});

和演示http://jsfiddle.net/4KSZx/6/