7

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

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

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

我尝试使用诸如超时之类的各种技术来检查单击鼠标是否跟随双击（如以下线程中所建议： 检测到双击事件时需要取消单击/鼠标事件

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

总而言之，请帮助！提前致谢

4

3 回答 3

3

按照您链接的答案中给出的建议，您只需对 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/

于 2013-03-22T10:35:53.763 回答
1

那就不要使用backbone.js的事件注册了。

通过使用 need-to-cancel-click-mouseup-events-when-double-click-event-detected来使用jQuery事件注册

于 2013-03-22T10:29:53.723 回答
0

我不知道我是否理解你所说的，但是......试试看：

$(document).click(function(event) {
    // Page variables of the mouse event
    var pageX = event.pageX;
    var pageY = event.pageY;
    var someFunctions = function() {
        /*
        if(pageX == 300 && pageY == 120) {
            event.preventDefault();
            // do functions
        }
        */
    };

    // start the functions
    someFunctions();
});

$(document).dblclick(function() {
   // functions here to dblclick    
});

对不起，如果不是这个，但我试过了。

于 2013-03-22T09:32:38.830 回答