如何在Web应用中禁用长按右键菜单且保留所有指针事件？

针对你遇到的触摸屏长按触发contextmenu后丢失pointerup事件的问题，这里有几个可靠的解决思路：

1. 用CSS优先禁用默认触摸行为（推荐） #

通过touch-action: manipulation直接告诉浏览器，该元素不需要默认的触摸交互（比如长按弹出菜单、双击缩放），同时还能消除300ms点击延迟，一举两得。再配合user-select: none防止长按选中文本，最后用contextmenu事件兜底处理鼠标右键。

.sampler-btn {
  touch-action: manipulation; /* 禁用浏览器默认触摸行为，阻断长按菜单触发 */
  user-select: none; /* 禁止文本选中，避免额外干扰 */
  /* 其他按钮样式 */
}

JavaScript逻辑：

const btn = document.querySelector('.sampler-btn');
let audioCtx, soundSource;

// 按下触发播放
btn.addEventListener('pointerdown', (e) => {
  // 初始化音频上下文（浏览器安全限制：必须由用户交互触发）
  if (!audioCtx) audioCtx = new AudioContext();
  // 示例：创建一个简单的声音（替换成你的采样逻辑）
  soundSource = audioCtx.createOscillator();
  soundSource.connect(audioCtx.destination);
  soundSource.start();
  btn.classList.add('pressed');
});

// 释放/离开停止播放
btn.addEventListener('pointerup', stopSound);
btn.addEventListener('pointerleave', stopSound);

// 兜底禁用鼠标右键菜单
btn.addEventListener('contextmenu', (e) => e.preventDefault());

function stopSound() {
  if (soundSource) {
    soundSource.stop();
    soundSource = null;
  }
  btn.classList.remove('pressed');
}

2. 在pointerdown阶段提前阻止默认行为 #

如果CSS的touch-action不足以覆盖所有场景，可以在pointerdown事件中直接调用e.preventDefault()，提前阻断浏览器的默认行为（包括长按菜单、右键菜单），确保pointerup事件能正常触发。

注意：仅在按钮元素上使用该逻辑，避免影响页面其他区域的滚动、缩放等交互。

btn.addEventListener('pointerdown', (e) => {
  e.preventDefault(); // 提前阻止默认行为，阻断后续contextmenu触发
  // 剩余播放逻辑...
});

3. 监听pointercancel事件做兜底 #

有些情况下，系统可能会主动中断指针事件（比如弹出系统菜单、切换应用），这时候pointerup不会触发，但会触发pointercancel。监听这个事件可以确保按钮状态被正确重置：

btn.addEventListener('pointercancel', stopSound);

为什么之前的方案会失效？ #

触摸屏上长按触发contextmenu时，浏览器会中断当前的指针事件流，导致后续的pointerup事件被丢弃。而通过CSS或pointerdown阶段阻止默认行为，能从根源上避免contextmenu事件触发，让指针事件完整传递。

内容的提问来源于stack exchange，提问作者DavGin