jquery - MouseUp 和 DoubleClick 都使用 Backbone js 连接到单独的事件处理函数

Question

我有一个图表应用程序，其中我使用 Backbone.js 在图表图像的不同“区域”上附加用于 mouseup 和 doubleclick 事件的单独处理程序。

我需要 mouseup 来检测用户是否单击了图表图像的“区域”部分上的左键或右键，并根据情况重定向我的流程。另外，我需要双击来放大或最小化包含图表图像的面板。

这就是问题所在。由于每次双击都会隐式调用 mouseup，因此我的最大化/最小化功能会干扰左/右键单击功能。

我尝试使用各种技术(例如超时)来检查单击鼠标后是否紧接着双击(如以下线程中所建议的: Need to cancel click/mouseup events when double-click event detected

这对我不起作用。另外，我在同一页面上有包含图表的 View 的不同对象，因此我在每个事件处理程序中附加唯一的 ID 以区分它们，我还尝试了简单的标志集重置方法来检测双击并在发生双击时防止 mouseup，但因为事件层次结构中 mouseup 在双击之前发生，也失败了。

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

Answer 1

遵循the answer you linked中给出的建议，您只需对 mouseup 的回调进行反跳并检查给定时间段内是否发生第二次单击。

假设以这种方式定义 View ( 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/