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

Question

我问是因为这种情况：

我将手指放在列表项上。 500ms 后触发锤子 press 事件，页面显示动作 sheet。 1s 之后，我举起手指，click 事件触发（常规点击，不是 Hammer 发出的点击）。那时我的手指在操作 sheet 背景上，它有一个自行关闭的点击处理程序。

我意识到使用 Hammer tap 事件来关闭动作 sheet 是可行的，因为它有一个 250ms 最大持续时间，但是动作 sheet 库使用click 事件。如果持续时间为 250ms，有没有办法告诉浏览器不要触发点击？或者告诉浏览器不要发出发生的下一次点击？

Answer 1

您是否根据 hammer.js 页面关于禁用幻影点击的讨论实施了以下解决方案？

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

hammer.js

Answer 2

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

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

以某种方式阻止它

在全局样式中，我添加了以下助手 class：

.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 事件。

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

How can you prevent a click from firing at the end of a long press?

javascript

onclick

dom-events

hammer.js