这是怎么做到的?
5 回答
这是一个很好的问题,我实际上并不认为它可以很容易地完成。(对此有一些讨论)
如果拥有此功能对您来说非常重要,您可以像这样破解它:
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 组件,如果进行单击操作会排除进行双击操作。据我所知,“单击一次即可撤消刚刚发生的事情”技术是唯一可行的解决方法。
其他答案中概述的技术称为debounceing。
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 插件/效果框架,可让您更轻松地开发插件和扩展。所以希望这有助于实现这一目标!
如果这是用于提交表单的按钮(原始海报不一定是这种情况,但可能是其他人通过谷歌到达这里的情况),一个更简单的选择是禁用正在点击的元素您的点击事件处理程序:
$(selector).click(function(e) {
$(this).prop('disable', true);
}