检测到双击事件时需要取消单击/鼠标事件

Question

这是怎么做到的？

Answer 1

这是一个很好的问题,我实际上并不认为它可以轻松完成.(关于此的一些讨论)

如果你拥有这个功能对你来说非常重要,你可以像这样破解它:

function singleClick(e) {
    // do something, "this" will be the DOM element
}

function doubleClick(e) {
    // do something, "this" will be the DOM element
}

$(selector).click(function(e) {
    var that = this;
    setTimeout(function() {
        var dblclick = parseInt($(that).data('double'), 10);
        if (dblclick > 0) {
            $(that).data('double', dblclick-1);
        } else {
            singleClick.call(that, e);
        }
    }, 300);
}).dblclick(function(e) {
    $(this).data('double', 2);
    doubleClick.call(this, e);
});

以下是工作中的一个例子.

正如评论中指出的那样,有一个插件可以完成我上面所做的事情,但是为你打包它所以你不必看到丑陋的:FixClick.

Answer 2

Raymond Chen讨论了单击与双击的一些含义 - 虽然他在Windows的背景下谈论,他说这与基于浏览器的UI设计有关.

基本上,双击后所采取的操作在单击后应该是合乎逻辑的.例如,在桌面UI中,单击选择一个项目,然后双击打开它(例如,打开文件或启动应用程序).用户无论如何都必须选择要打开的文件,因此在双击操作之前进行单击操作并不重要.

如果您的UI组件的双击操作与单击操作完全无关,那么一旦系统意识到它实际上是双击,就必须防止单击操作发生,那么您真的应该重新考虑您的设计.用户会发现它很笨拙且反直觉,因为它不会像他们习惯行事一样行事.

如果您仍然想要这样,那么您将不得不使用去抖技术(在这种情况下,所有单击操作都将被延迟)或者实现一些机制,双击处理程序撤消单击处理程序完成的工作.

您还应该知道某些用户设置了很长的双击时间.例如,患有关节炎手的人可能在他们的系统偏好中具有超过一秒的双击时间,因此基于您选择的任意时间段的去抖技术将使得您的UI组件对于那些人来说是不可访问的.采取单击操作无法进行双击操作.据我所知,"撤消刚发生的单击"技术是唯一可行的解​​决方法.

Answer 3

其他答案中概述的技术称为去抖动.