1

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

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");
  });
}

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

4

1 回答 1

4

更新：

尝试将函数 clicks() 传递给您的事件侦听器，如下所示：

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

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

纯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>

于 2017-04-13T05:51:42.930 回答