Question

我有两个事件侦听器，一个用于Click和Touch事件。它们都应该运行相同的功能，但只能运行一次。如果在某些设备上它们都正确，那么它将运行两次该功能。

我希望能够单击一个按钮并侦听两个事件侦听器，但是如果触发了其中一个，则只能运行一次功能。

window.addEventListener("click", function(event) {
    myFunction();
});
window.addEventListener("touchstart", function(event) {
    myFunction();
});

function myFunction() {
    console.log("Clicked");
}

Answer 1

请参见MDN's article on Supporting both TouchEvent and MouseEvent ：

如果由于单个原因浏览器同时触发了触摸和鼠标事件   用户输入，浏览器必须在任何鼠标之前触发touchstart   事件。因此，如果应用程序不希望发生鼠标事件   在特定的触摸目标元素上触发，该元素的touch事件   处理程序应调用preventDefault（），并且不应有其他鼠标事件   将被派遣。

这是touchmove事件处理程序调用的代码段   preventDefault（）。
// touchmove handler
function process_touchmove(ev) {
  // Call preventDefault() to prevent any further handling
  ev.preventDefault();
}

Answer 2

假设两个事件几乎同时触发，则可以使用以下方法防止myFunction在预定义的阈值内执行两次：

// threshold to reset allowing the execution
const _msThreshold = 200;

// date at which the function is last executed
let _myFnExecutedAt = new Date(0);

// your function
function myFunction() {
    console.log("Clicked");
}

// executer that checks if the threshold is exceeded
// to allow your function call and reset the timer
function execute() {
    if (new Date() - _myFnExecutedAt > _msThreshold) {
        myFunction();
        _myFnExecutedAt = new Date();
    }
}

window.addEventListener("click", execute);
window.addEventListener("touchstart", execute);

请记住，您必须对阈值进行一些实验：

如果将其设置得太低，则第二个事件寄存器之前可能会超过它，因此两者都会触发。
如果将其设置得太高，则随后的实际点击/触摸可能不会记录。

2个事件监听器，一次运行功能

2 个答案: