javascript - 双击事件不触发

标签 javascript event-listener double-click

JavaScript 中的双击事件存在一些问题。

我希望能够快速连续地点击一个元素,但听双击。这在技术上是否可行,还是我需要单击一次并在单击两次时进行监听?

代码笔示例 here .

JS也可以在下面找到。

(function() {

  var el;
  var count = 0;
  var counter;

  function init() {
    el = document.getElementById('click-me');
    counter = document.getElementById('counter');

    el.addEventListener('dblclick', onDblClick, false);
  }

  function onDblClick(e) {
    count++;
    counter.textContent = count;
  }

  init();

}());

好像双击某个东西后,需要稍作停顿让它重置事件,可能是一秒或半秒?

dblclick 事件本身是否遗漏了什么,或者我试图做的事情是不可能的?

附言这只需要在 Webkit/Chrome 中工作,因为这不是用于网站,而是用于游戏的叠加层。

最佳答案

像这样 ( https://gist.github.com/karbassi/639453 ):

(function() {

  var el;
  var count = 0;
  var counter;
  var clickCount = 0;

  function init() {
    el = document.getElementById('click-me');
    counter = document.getElementById('counter');

    el.addEventListener('click', onDblClick, false);
  }

  function onDblClick(e) {

    clickCount++;
    if (clickCount === 1) {
        singleClickTimer = setTimeout(function() {
            clickCount = 0;            
        }, 400);
    } else if (clickCount === 2) {
        count++;
        clearTimeout(singleClickTimer);
        clickCount = 0;
        counter.textContent = count;
    }
}
  init();

}());

关于javascript - 双击事件不触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46833489/

相关文章:

android - 如何在 Android (Nexus 10) 上禁用 Chrome 30 中的双击缩放功能

android - Firebase - 在 Android 中检索数据

javascript - 正则表达式 - 仅接受 4 到 12 之间的数字(不应接受其他任何数字)

javascript - tr 没有在ajax 请求中删除。

javascript - socket.io 连接事件不起作用,为什么?

javascript - 使用提交按钮减去两个日期

javascript - 如何使用 Chartjs 版本 2.X 设置自定义工具提示事件

android - 双击一个词来选择它

selection - 在 Sublime Text 3 中选择包含 $ 的文本

javascript - 旋转后移动 Canvas 图像对象