Question

因为这种情况我问：

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

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

Answer 1

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

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

hammer.js

Answer 2

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

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

如何在长按结束时阻止点击？

2 个答案: