Question

我有以下代码段来区分点击次数和双击：

observeSingleAndDoubleClick: function (element, singleClickHandler, doubleClickHandler, timeout) {
    var clicks;
    $(element).observe('click', function (event) {
        ++clicks;
        if (clicks === 1) {
            var timeoutCallback = function (event) {
                if (clicks === 1) {
                    singleClickHandler.call(this, event);
                } else {
                    doubleClickHandler.call(this, event);
                }
                clicks = 0;
            };
            timeoutCallback.bind(this).delay(timeout / 1000);
        }
    }.bind(this));
}

问题：调用延迟回调时，事件不再存在。虽然它适用于Firefox，但它不适用于IE8。传递给点击处理程序的事件对象是“死的”，因为事件本身已经传递。

任何人都有建议如何解决这个问题？

Answer 1

不仅要观察点击事件，还要观察双击事件。

$(element).observe('click',singleClickHandler); 
$(element).observe('dblclick',doubleClickHandler);

以下是所有讨论后的更改版本：

var clicks;    
observeSingleAndDoubleClick: function (element, singleClickHandler, doubleClickHandler, timeout) {

$(element).observe('click', function (event) {
    ++clicks;
    if (clicks === 1) {
        var timeoutCallback = function (event) {
            if (clicks === 1) {
                singleClickHandler.call(this, event);
            } else {
                doubleClickHandler.call(this, event);
            }
            clicks = 0;
        };
        timeoutCallback.bind(this, event).delay(timeout / 1000);
    }
}.bind(this));

}

Answer 2

我知道OpenLayers项目有类似的东西。请查看此文件中的第210行：OpenLayers.Handler.Click sourcecode。

我不知道如何在Prototype框架中使用它，但我希望它能以正确的方式让你：）

另一件事：使用mouseUp事件而不是点击会不会更好？

Answer 3

Prototype上有dblclick个事件ID。你为什么不用它？

observeSingleAndDoubleClick: function (element, singleClickHandler, doubleClickHandler) {

  $(element).observe('click', function (event) {
    singleClickHandler.call(this, event);
  }

  $(element).observe('dblclick', function (event) {
    doubleClickHandler.call(this, event);
  }
}

区分单击和双击

3 个答案: