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

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

在其他的答案中概述的技术被称为去抖动。

Answer 4

jQuery Sparkle 通过实现单击自定义事件为此提供了一个干净优雅的解决方案。通过这样做，您可以像任何其他事件一样使用它，因此：

$('#el').singleclick(function(){});
// or event
$('#el').bind('singleclick', function(){});

它还为一系列点击的最后一次点击和第一次点击提供自定义事件。而lastclick自定义事件实际上是把点击量传回来的！所以你可以这样做！

$('#el').lastclick(function(event,clicks){
    if ( clicks === 3 ) alert('Tripple Click!');
});

您可以找到定义自定义事件的源代码 这里.

它是在 AGPL 许可证下开源的，因此您可以放心地从中获取您需要的内容！:-) 它还每天都在积极开发，因此您永远不会缺乏支持。

但最重要的是，它是一个 DRY 插件/效果框架，可让您更轻松地开发插件和扩展。所以希望这有助于实现这一目标！

Answer 5

如果这是一个按钮提交表单（这不一定是原来的海报的情况，但也可以是其他人到达这里通过谷歌的情况下），但更简单的办法是禁用正在元素在点击事件处理程序点击：

$(selector).click(function(e) {
    $(this).prop('disable', true);
}