区分单击和双击

Question

区分单击和双击

3

我有以下代码片段，用于区分单击和双击：

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中却不能。传递给点击处理程序的事件对象是“失效”的，因为事件本身已经过去了。

有人有解决这个问题的建议吗？

- tyrondis

1

坦白地说，我根本不会这样做。浏览器计时器的可靠性非常低，你会让用户感到疯狂。总的来说，网络并不支持双击操作。 - Pointy

为什么不使用 onclick 和 ondblclick？它是不支持该功能的对象吗？参考链接：http://msdn.microsoft.com/en-us/library/ms536921%28v=vs.85%29.aspx，https://developer.mozilla.org/en/DOM/element.ondblclick - mplungjan

3

即使采用这种方法，也需要添加一些计时器代码。为什么？因为每次“双击”事件都会先触发一个“单击”事件。因此，您的“单击”事件处理程序必须等待以查看是否还会发生“双击”事件。这很混乱。 - Pointy

3个回答

1

我知道OpenLayers项目做了类似的事情。请查看此文件中的第210行：OpenLayers.Handler.Click sourcecode。

我不知道如何在Prototype框架中使用它，但我希望它能让你走上正确的道路 :)

另外一件事：使用mouseUp事件而不是click事件会更好吧？

- Kristian Frost

0

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

- kikito

1

因为单击处理程序将在双击的第一次单击上触发。 - tyrondis

在这种情况下，添加另一个按钮或链接。如果您在单击和双击时执行不同的操作，那么您只是在自找麻烦。 - kikito

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TurBas · Accepted Answer

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

$(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));

}