将不同的事件绑定到点击和双击

您可能希望链接在双击时执行特殊操作，从而阻止链接的默认操作（跳转到另一个页面）。所以

双击：执行特殊操作，完全不执行正常的点击事件
点击：正常工作

您需要在触发正常的点击操作时稍微延迟一下，并在发生双击事件时取消该操作。

function doClickAction() {
  $("#click h2").append("•"); 
}
function doDoubleClickAction() {
  $("#double-click h2").append("•"); 
}

var timer = 0;
var delay = 200;
var prevent = false;

$("#target")
  .on("click", function() {
    timer = setTimeout(function() {
      if (!prevent) {
        doClickAction();
      }
      prevent = false;
    }, delay);
  })
  .on("dblclick", function() {
    clearTimeout(timer);
    prevent = true;
    doDoubleClickAction();
  });

Check out this Pen!

James

# 2016年3月4日

尝试点击，点击然后双击，您的脚本失败了

nickzone

评论永久链接# 2016年11月29日

但我认为它运行良好！
Roopesh Kumar

评论永久链接# 2018年5月9日

使用数组进行settimeout

Radek Surani

# 2016年12月27日

谢谢，这对我很实用。

BugFinder

# 2017年4月15日

在双击自动选择文本的时刻，是否会分配一个正常的点击事件？

Jan Peša

# 2018年1月16日

如果您的操作系统双击阈值高于200毫秒（大多数情况下都是），则此脚本显然会失败。在“点击”点出现后再次点击 - 最有可能添加“双击”点，这是因为您的脚本已经完成了计时器，但操作系统当然仍然认为第二个点击是双击，但没有东西可以取消。
正确的解决方案是拥有单个点击事件处理程序，并检查是否有正在运行的计时器 - 如果有，则取消它并执行双击操作。已完成的计时器本身将执行单击操作。

syzygy (@syzygy556)

评论永久链接# 2018年7月1日

您能否为您的解决方案提供一个代码示例

Manohar

# 2018年2月19日

这在Chrome中运行良好，但在IE中不行。IE有什么解决方法吗？

Mike

# 2018年8月13日

太感谢了！我有一个使用了多年的应用程序，它在Chrome中无法正常工作，而这终于让我解决了它 :)

dja014

# 2019年1月11日

虽然看起来有点粗糙和笨重，但这是一个绝妙的解决方案。

T. Greg O'Neil

# 2019年3月2日

这是一个启用双击的解决方案，但不需要JQuery的dblclick方法。它只使用click。

var timer = 0;
var delay = 200;
var clicked = false;

$('#target')
.click (function () {

    var sel = this;

    if (clicked) {

        clearTimeout (timer);
        doDoubleClickAction();  // aha!
        clicked = false;

    } else {

        clicked = true;

        timer = setTimeout (function () {

            doSingleClickAction();
            clicked = false;

        }, delay);

    } // end if (clicked)

});

T. Greg O'Neil

评论永久链接# 2019年3月2日

行“var sel = this;”没有必要。是代码的残留。

Tiha

# 2019年8月8日

它对我不起作用，因为它按如下方式执行
两次快速点击（意图是双击）=> 点击事件处理程序执行两次，然后双击事件执行一次。因此，setTimeout在点击事件处理程序中执行了两次，因此“timer”指的是第二个超时对象。此第二个对象由双击事件清除，但第一个超时对象未清除。结果，我们执行了一次双击，然后执行了一次第一次单击。作为解决方案，在单击事件处理程序中，在创建timer = setTimeout(…)之前，我执行了clearTimeout(timer)。然后它按预期工作。

Cătălin

# 2020年2月11日

您需要混合使用超时和event.detail检查才能使其工作。
查看我在stackoverflow上的答案 - https://stackoverflow.com/a/60177326/670839

Mai Duc Tuan

# 2020年10月23日

这是一个好主意，但当两次点击之间的时间在201毫秒到500毫秒之间时，两种操作都将被调用，因为两次点击触发dbclick事件的超时时间为500毫秒（Window OS中的默认值），因此此解决方案并非在所有情况下都能正常工作。
我修复此错误的解决方案

const mouseTestElement = document.querySelector("#click-area");
let timeOutFunction = null;
let countClick = 0;
const TIME_OUT = 200;

mouseTestElement.addEventListener('click', (event) => {
    clearTimeout(timeOutFunction)
    countClick++;

    timeOutFunction = setTimeout(() => {
        if (countClick === 1) {
            // handle for single click
            console.log('Single click')
        } else if (countClick === 2) {
            // handle for double click
            console.log('Double click')
        }
        countClick = 0;
    }, TIME_OUT)

});

评论

发表回复 取消回复

发表回复取消回复