如何防止长按结束时发出咔嗒声

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

本文关键字：何防止 结束      更新时间：2023-09-26

我问是因为这种情况：

我把手指放在一个清单上。在500ms之后，会触发Hammer press事件，页面显示一个动作表。在1s之后，我举起手指，一个click事件启动（一个常规的点击，而不是Hammer发出的点击）。我的手指在动作表背景上，它有一个关闭自己的点击处理程序。

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

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

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

hammer.js

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

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

相关文章：