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

IT技术 javascript jquery event-handling click double-click
2021-01-24 14:51:31

这是怎么做的?

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

顺便说一句,这个plugins.jquery.com/project/FixClick似乎已经有一个插件可以解决类似于 Paolo Bergantino 的问题
2021-03-19 14:51:31
是的,我认为就双击而言,250 甚至更少可能是合理的预期。我一直在对此进行认真的谷歌搜索,显然这是你能得到的最好的结果。如果它让你感觉更好,我可以用它制作一个插件来隐藏丑陋。:)
2021-03-23 14:51:31
实际上,我不能在双击持续时间内简单地阻止后续的单击事件吗?我认为这可以解决延迟问题。
2021-03-28 14:51:31
jQuery 插件站点已关闭,但 GitHub 中这个简洁的 jQuery 扩展链接到 jQuery 站点gist.github.com/399624上的评论部分
2021-04-10 14:51:31
好吧,它似乎有效,但它有一个明显的问题,即在 0.5 秒内无法检测到常规点击。我当然可以缩短时间,但是……哦,好吧。那我自己去搞清楚。不管怎么说,还是要谢谢你。
2021-04-12 14:51:31

Raymond Chen 讨论了单击与双击的一些含义——尽管他是在 Windows 上下文中讨论的,但他所说的内容与基于浏览器的 UI 设计相关。

基本上,双击时采取的操作应该是单击后合乎逻辑的事情。例如,在桌面 UI 中,单击选择一个项目,然后双击打开它(例如打开文件或启动应用程序)。无论如何,用户都必须选择文件才能打开它,因此在双击操作之前执行单击操作并不重要。

如果你有一个 UI 组件,它的双击动作与单击动作完全无关,以至于一旦系统意识到它实际上是双击动作就必须阻止单击动作发生,那么你真的应该重新考虑你的设计。用户会发现它笨拙且违反直觉,因为它不会按照他们习惯的方式行事。

如果您仍然想这样做,那么您将不得不使用去抖动技术(在这种情况下所有单击操作都将被延迟),或者实现某种机制,使双击处理程序撤消单击处理程序所做的工作.

您还应该知道,有些用户设置了很长的双击时间。例如,手部患有关节炎的人的系统偏好设置中的双击时间可能超过一秒,因此基于您选择的任意时间段的去抖动技术将使这些人无法访问您的 UI 组件,如果执行单击操作排除了执行双击操作。据我所知,“在单击时撤消刚刚发生的事情”技术是唯一可行的解​​决方法。

关于用户能够设置自己的双击时间的好处......我不想在执行单击操作之前等待整整一秒钟,因此等待超时的双击实际上是无用的
2021-03-14 14:51:31
有时双击操作是单击后的合乎逻辑的后续操作,之前也可以执行单击操作(这就是我现在的情况),但是单击操作可能会导致一些额外的负载(或者,在我的情况下,数据流量)你想阻止(虽然它不会完全伤害)
2021-03-29 14:51:31

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

很酷的东西和不错的文章。+1
2021-03-13 14:51:31

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