Question

似乎在处理指针事件时，contextmenu 事件会导致 pointerout、pointercancel 和 pointerleave 事件，但随后的 pointerup 和 pointermove 事件将被忽略。

这对触摸设备来说是一个相当大的问题，因为长按会引发 contextmenu。如果指针移动在某个位置停留时间过长，则可能导致长指针移动提前结束。

我找到了有关如何忽略 contextmenu 事件的建议。但是否可以完全禁用它，使其永远不会触发？特别是，使得它不妨碍指针事件流程？

或者，可以自定义长按的“持续时间”吗？

** 编辑 ** 展示这种效果的一些代码，基于 Axionatic 的：

<!DOCTYPE html>
<html>
<body>
<div id="noContextMenu" style="height:150px; background-color:#ffaaaa;">
  <h2>不允许右键单击！</h2>
</div>
<script>
  const noContext = document.getElementById('noContextMenu');
  noContext.addEventListener('contextmenu', e => {
    console.log('contextmenu');
    e.preventDefault();
  });
  noContext.addEventListener('pointerdown', e => console.log('pointerdown'));
  noContext.addEventListener('pointerup', e => console.log('pointerup'));
  noContext.addEventListener('pointercancel', e => console.log('pointercancel'));
  noContext.addEventListener('pointerout', e => console.log('pointerout'));
  noContext.addEventListener('pointerleave', e => console.log('pointerleave'));
  noContext.addEventListener('pointermove', e => console.log('pointermove'));
  noContext.addEventListener('touchstart', e => console.log('touchstart'));
  noContext.addEventListener('touchmove', e => console.log('touchmove'));
  noContext.addEventListener('touchend', e => console.log('touchend'));
  noContext.addEventListener('touchcancel', e => console.log('touchcancel'));
</script>
</body>
</html>

在浏览器的触摸设备仿真模式下打开此文件，然后尝试进行长按并继续指针移动而不释放触摸。您应该会看到以下输出：

pointerdown
touchstart
contextmenu
pointercancel
pointerout
pointerleave
touchcancel

但是没有更多的 pointermove 或 pointerup 或 touchmove 或 touchend 事件。

在 `contextmenu` 事件后接收指针事件

0 个答案: