一种简洁、更简单的方法来消除 onclick 事件

Question

设置

我有一个移动用户界面，在视口的左下角有自己的UI后退按钮 .

N.B. In this case, the UI is an overlay which appears above the web-page being visited, so as much as I'm a fan of History.pushState(), in this case, I have no specific intention to maintain a navigable history of overlay views using History.pushState().

如果用户通过两个或更多视图进入 UI 叠加层，则每当单击或点击 UI 后退按钮 , UI-overlay 应该显示上一个视图。

问题

我注意到我的 UI 后退按钮 可能非常敏感，很容易不经意地与它互动，以至于 EventListener 认为它已被点击两次甚至三次，当用户的意图只是点击它一次。

建议的解决方案

显然需要某种 去抖动 ，因为我们可能更常使用 onscroll 或 onresize 事件。

我在使用named setTimeout()函数之前写过debouncer，并且使用clearTimeout()重复取消named setTimeout()，所以只有一个scroll或resize 事件（最后一个）实际上触发了。

但在这种情况下，具有重复 clearTimeout() 功能的去抖器感觉过于复杂。

其他问题

理想情况下，我正在寻找一种简单、快速、简单、简洁的方法来在检测到第一次点击后暂时停用 EventListener。

我可以使用 removeEventListener() - 但这需要在每次部署中对原始 addEventListener()
的格式有特定的了解
我可以使用 AbortSignal - 但这需要在原始 addEventListener() 的 options 参数中设置 signal，我不能'别指望了

是否有一种简单通用的方法来去除 onclick 事件的抖动？

Answer 1

反跳一个onclick事件有一种出乎意料的简单方法，只需要两行javascript.

该方法将 EventTarget 的 CSS pointer-events 属性设置为 none，然后稍后将其重置为 auto：

const myFunction = (e) => {
    
  e.target.style.setProperty('pointer-events', 'none');
  setTimeout(() => {e.target.style.setProperty('pointer-events', 'auto')}, 800);
    
  // REST OF FUNCTION HERE
}

工作示例：

const myElement = document.querySelector('.my-element');

const myFunction = (e) => {
    
  e.target.classList.add('unclickable');
  setTimeout(() => {e.target.classList.remove('unclickable')}, 2000);
    
  console.log('myElement clicked');
}
    
myElement.addEventListener('click', myFunction, false);

.my-element {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-family: sans-serif;
  font-weight: 900;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
  transition: opacity 0.3s linear;
  cursor: pointer;
}

.my-element.unclickable {
  opacity: 0.5;
  pointer-events: none;
}

<div class="my-element">Click me!</div>

一种简洁、更简单的方法来消除 onclick 事件

A concise, simpler way to debounce the onclick event

javascript

dom-events

onclicklistener

debouncing

设置

问题

建议的解决方案

其他问题