单击和双击同一元素，不起作用； Javascript

Question

我正在尝试添加单击按钮时触发的单击功能。我也在试图弄清楚如何在同一个元素上添加双击功能，从而触发不同的事件。

var click = false;
onEvent("image2", "click", function(event) {
  click = true;
});
if (click === true) {
  setTimeout(function() {
    onEvent("image2", "click", function(event) {
      setScreen("safeScreen");
      console.log("double click");
    });
  }, 200);
} else {
  onEvent("image2", "dblclick", function(event) {
    setScreen("safeScreen");
    console.log("click");
  });
}

这段代码完全错误，但我不知道从哪里开始/更正。我究竟做错了什么？我希望用户双击时不会触发单击。

Answer 1

更新：

尝试像这样将函数 clicks() 传递给您的事件侦听器：

onEvent("image2", "click", clicks);

函数clicks() 将根据setTimeout 函数检查是否有单击或双击。您可以通过timeout 变量调整setTimeout，当然您需要在clicks() 函数之外声明clickCount 变量。

---

纯 js 方法

尝试添加两个事件监听器。更少的代码，更干净。检查这个工作示例。

var selector = document.getElementById('codeorg');
selector.addEventListener('click', clicks);


// Global Scope variable we need this
var clickCount = 0;
// Our Timeout, modify it if you need
var timeout = 500;
// Copy this function and it should work
function clicks() {
  // We modify clickCount variable here to check how many clicks there was
  
      clickCount++;
      if (clickCount == 1) {
        setTimeout(function(){
          if(clickCount == 1) {
            console.log('singleClick');
            // Single click code, or invoke a function 
          } else {
            console.log('double click');
            // Double click code, or invoke a function 
          }
          clickCount = 0;
        }, timeout || 300);
      }
}



// Not important for your needs - pure JS stuff
var button = document.getElementById('button');

button.addEventListener('click', singleClick);
button.addEventListener('dblclick', doubleClick);

function singleClick() {
  //console.log('single click');
}

function doubleClick() {
  console.log('double click');
}

#codeorg {
  margin-bottom: 100px;
}

<h2>Double Click</h2>

<button id="button">Click me</button>


<hr><hr>


<h2>Double click or Single Click</h2>

<button id="codeorg">Click me</button>