当检测到双击事件时需要取消点击/鼠标移动事件

76

这是一个很好的问题，我其实并不认为它可以轻松完成。（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。

来源

2009-07-01 05:56:32

+0

好吧，它似乎可以工作，但它有一个明显的问题，就是没有检测到0.5秒的常规点击。当然，我可以缩短时间，但是...哦。我会自己解决这个问题。不管怎么说，还是要谢谢你。 – 2009-07-01 06:11:19

+0

是的，我认为250或更少可能是合理的，只要双击即可。我一直在做一些严重的谷歌搜索，显然这是最好的你会得到。如果它让你感觉更好，我可以制作一个插件来隐藏丑陋的东西。 :) – 2009-07-01 06:12:50

+0

有趣的，还没有尝试过这一点，并且确实看起来像一个hackish的方式来做到这一点。但从事件观点来看，点击事件被调用两次是合理的 – jitter 2009-07-01 06:14:51

7

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

来源

2009-07-01 06:54:52

31

Raymond Chen已经讨论了一些implications of single-versus-double clicking--尽管他在Windows环境下讨论，但他说的是基于浏览器的UI设计。

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

如果您有一个UI组件，其双击操作与单击操作完全无关，因此一旦系统意识到它实际上是双击，就有必要防止单击操作发生，那么您确实应该重新考虑你的设计。用户会发现它很尴尬和违反直觉，因为它不会像习惯事物一样采取行动。

如果你仍然想这样做，那么你将不得不使用去抖动技术（在这种情况下，所有单击动作将被延迟），或者实现一些机制，由此双击处理程序解除了由单击处理程序。

您还应该知道，有些用户设置了很长的双击时间。例如，有关节炎手的人可能在系统首选项中的双击时间超过一秒钟，所以基于您选择的任意时间段的去抖技术将使您的用户界面组件无法访问，如果这些人采取单击操作排除采取双击行动。就我所知，“撤销单点击发生的事情”是唯一可行的解决方法。

来源

2009-07-01 09:59:17 NickFitz

1

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

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

它还提供了自定义事件的一系列点击的姓氏和点击。而lastclick自定义事件实际上将点击返回！所以你可以做到这一点！

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

你可以找到源代码来定义自定义事件here。

它是根据AGPL许可证开放源代码的，所以您可以随心所欲地抓住你所需要的无忧！:-)它也积极地在日常的基础上发展，所以你永远不会缺乏支持。

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

来源

2010-07-16 09:15:04 balupton

0

如果这是一个提交表单的按钮（原始海报不一定是这种情况，但可能是其他人通过Google来到这里），更简单的方法是禁用在您的点击事件处理程序中单击：

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

来源

2012-06-13 16:01:14

当检测到双击事件时需要取消点击/鼠标移动事件

回答

相关问题