这是怎么做的?
检测到双击事件时需要取消单击/鼠标向上事件
这是一个很好的问题,实际上我认为这并不容易。(对此有一些讨论)
如果拥有此功能对您来说非常重要,您可以像这样破解它:
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。
Raymond Chen 讨论了单击与双击的一些含义——尽管他是在 Windows 上下文中讨论的,但他所说的内容与基于浏览器的 UI 设计相关。
基本上,双击时采取的操作应该是单击后合乎逻辑的事情。例如,在桌面 UI 中,单击选择一个项目,然后双击打开它(例如打开文件或启动应用程序)。无论如何,用户都必须选择文件才能打开它,因此在双击操作之前执行单击操作并不重要。
如果你有一个 UI 组件,它的双击动作与单击动作完全无关,以至于一旦系统意识到它实际上是双击动作就必须阻止单击动作发生,那么你真的应该重新考虑你的设计。用户会发现它笨拙且违反直觉,因为它不会按照他们习惯的方式行事。
如果您仍然想这样做,那么您将不得不使用去抖动技术(在这种情况下所有单击操作都将被延迟),或者实现某种机制,使双击处理程序撤消单击处理程序所做的工作.
您还应该知道,有些用户设置了很长的双击时间。例如,手部患有关节炎的人的系统偏好设置中的双击时间可能超过一秒,因此基于您选择的任意时间段的去抖动技术将使这些人无法访问您的 UI 组件,如果执行单击操作排除了执行双击操作。据我所知,“在单击时撤消刚刚发生的事情”技术是唯一可行的解决方法。
其他答案中概述的技术称为去抖动。
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 插件/效果框架,可让您更轻松地开发插件和扩展。所以希望这有助于实现这一目标!
如果这是用于提交表单的按钮(原始海报不一定是这种情况,但其他人通过 Google 到达这里的情况可能是这种情况),更简单的选择是禁用正在单击的元素您的点击事件处理程序:
$(selector).click(function(e) {
$(this).prop('disable', true);
}