javascript区分单击和双击[重复]

Question

我有一个简单的程序，例如：

<div onclick="handleClick(event)" ondblclick="handleDoubleClick(event)">
  Hellooww world
</div>
<script>
    var a = false
    function handleClick(e) {
    if(a) {
        a = false
            console.log("Hellooww", a)
    }else{
        a = true
      console.log("Hellooww", a)
    }
    }

  function handleDoubleClick(e) {
    console.log("world")
  }
</script>

在这里单击它会将 a 的值设置为 true 或 false。但是当它双击时它会同时执行单击和双击

如何只检查单击和双击

Answer 1

This thread 提供有关行为发生原因的详细信息，但这里是针对您的特定用例的解决方案。一种可能的方法是使用timeout 和一些等待时间。问题是没有标准的等待时间间隔。虽然您可以使用a mobile browser uses 的300 ms 计时来区分tap 和double tap 事件：

var a = false;
var timeout;
function handleClick(e) {
    timeout = setTimeout(function () {
        if (a) {
            a = false
            console.log("Hellooww", a)
        } else {
            a = true
            console.log("Hellooww", a)
        }
    }, 300);
}

function handleDoubleClick(e) {
    if (timeout) {
        clearTimeout(timeout);
    }
    console.log("world")
}

但通常，不要在同一个元素上注册 click 和 dblclick 事件：无法正确区分单击事件和导致 dblclick 事件的点击事件。