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函数检查是否有单击或双击。您可以通过setTimeout变量调整timeout，当然您需要在{click（）函数外部声明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>

Answer 2

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>

单击并双击同一元素，不工作;使用Javascript

2 个答案: