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

7
我有一个图表应用程序,在其中我使用 Backbone.js 为图表图像的不同“区域”附加单独的mouseup和doubleclick事件处理程序。
我需要通过mouseup检测用户是否在图表图像的“区域”部分单击了左键或右键,根据点击情况重定向执行流。同时,我需要双击以放大或缩小包含图表图像的面板。
问题在于,由于每次双击都会隐式调用mouseup,我的最大化/最小化功能会干扰左/右键单击功能。
我尝试使用各种技术,例如延迟检查单击后是否跟随doubleclick(如下线程所建议的: Need to cancel click/mouseup events when double-click event detected),但这对我没有起作用。此外,我在同一页上有包含图表的不同视图对象,因此我附加唯一ID与每个事件处理程序以区分它们。我还尝试了简单的标志设置复位方法来检测doubleclick并防止mouseup,但由于在事件层次结构中mouseup先出现,所以失败了。
总之,请帮忙!提前致谢。
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');
    }
});

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


1
非常抱歉延迟告知,但这个解决方案真的很棒!再次感谢您!赞! :) - Vidhi

1

我意识到了这个问题。我没有使用backbone的事件注册。我只使用了jQuery的事件注册。 - Vidhi

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

抱歉,如果不是这样,请原谅我尝试过了。


实际上,我尝试使用jQuery的click和dblclick来做同样的事情。但这不是我想要的。不过感谢你的努力。非常感谢。我很快会修改问题。 - Vidhi

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接