如何防止长按结束时触发点击事件？

Question

我之所以这样问是因为这种情况：

我在列表项上放下手指。经过500毫秒后，会触发一个 Hammer 的 "press" 事件，并在页面上显示一个操作表。1秒钟后，我抬起手指，会触发一个“click”事件（一个普通的点击，不是 Hammer 发出的）。此时我的手指位于操作表背景上，它有一个点击处理程序用于关闭自身。

我意识到使用 Hammer 的 “tap” 事件关闭操作表会起作用，因为它具有最大持续时间250毫秒，但操作表库使用 "click" 事件。有没有办法告诉浏览器如果持续时间为例如 250ms，就不要触发 click？或者是告诉浏览器不要发出接下来发生的下一次点击事件？

- Loren

Answer 1

你是否根据hammer.js页面上关于禁用幽灵点击的讨论实施了下面的解决方案？

https://developers.google.com/mobile/articles/fast_buttons#ghost

hammer.js

- kenjikato

---

谢谢，我成功地将https://gist.github.com/jtangelder/361052976f044200ea17与https://dev59.com/MFfUa4cB1Zd3GeqPGk13结合起来。 - Loren

Answer 2

我在Ionic中遇到了同样的问题：ActionSheet在触摸结束后消失。

我想出了以下解决方法：在HammerJS的pressup事件之后忽略元素上的click事件，使用pointer-events: none。这个解决方案利用了pressup事件后立即触发click事件的事实，所以我们能够通过处理pressup来防止它。

在全局样式中，我添加了以下帮助类：

.prevent-pointer-events {
  pointer-events: none;
}

然后，在处理press事件的同一个元素上，我添加了一个新的pressup事件处理程序，它执行以下操作：

  element.classList.add('prevent-pointer-events');

  setTimeout(() => {
    element.classList.remove('prevent-pointer-events');
  }, 50); // after 50ms we are sure the "click" event was fired and ignored,
          // so we can revert the class name back

请注意，此解决方案仅适用于一个元素，并且可以扩展为处理文档主体上的全局pressup事件。

- Alexey Grinko