Question

这是怎么做到的？

Answer 1

这是一个很好的问题，我实际上并不认为它可以很容易地完成。（Some discussion on this）

如果对于您拥有此功能非常重要，您可以像这样破解它：

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

这是一个example of it at work。

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

Answer 2

Raymond Chen已经讨论了一些implications of single-versus-double clicking - 虽然他在Windows的背景下谈论，但他所说的与基于浏览器的UI设计有关。

基本上，单次点击后双击动作应该是合理的。例如，在桌面用户界面中，单击选择一个项目，然后双击打开它（例如打开文件或启动应用程序）。用户无论如何都必须选择要打开的文件，因此在双击操作之前进行单击操作并不重要。

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

如果您仍然希望这样，那么您将不得不使用去抖动技术（在这种情况下，所有单击操作都将被延迟）或者实现一些机制，双击处理程序将撤消由单击处理程序。

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

Answer 3

其他答案中概述的技术称为debouncing。

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

您可以找到定义自定义事件here的源代码。

它是AGPL许可下的开源软件，因此您可以随心所欲地抓住您需要的东西！ :-)它也是日常积极开发的，所以你永远不会缺乏支持。

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

Answer 5

如果这是用于提交表单的按钮（原始海报的情况不一定如此，但其他人可能通过Google访问此情况），更容易的选择是禁用正在运行的元素点击了你的点击事件处理程序：

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

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

5 个答案: