如何通过JavaScript禁用Android Chrome中蓝牙鼠标右键默认返回行为？

在Android Chrome里，蓝牙鼠标右键默认会触发页面返回操作，直接调用event.preventDefault()无效通常是因为事件监听的时机、类型不对，或者浏览器默认行为的触发优先级更高。以下是几种可行的解决方法：

方法1：在捕获阶段监听contextmenu事件 #

浏览器的默认返回行为可能在冒泡阶段之前就执行了，所以需要在捕获阶段监听事件并阻止默认行为：

document.addEventListener('contextmenu', (e) => {
  // 仅处理鼠标右键（按钮编号为2）
  if (e.button === 2) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
  }
}, true); // 第三个参数true启用捕获阶段监听

方法2：监听pointerdown事件 #

Android Chrome可能将蓝牙鼠标的右键操作识别为pointer事件，而非常规的鼠标事件，这时可以监听pointerdown：

document.addEventListener('pointerdown', (e) => {
  // 确认是鼠标设备触发的右键操作
  if (e.pointerType === 'mouse' && e.button === 2) {
    e.preventDefault();
    e.stopPropagation();
  }
}, true);

方法3：拦截历史导航（极端情况） #

如果上面两种方法都无效，说明浏览器直接触发了历史栈返回，这时可以通过popstate事件拦截：

let isRightClickTriggered = false;

// 标记右键操作
document.addEventListener('pointerdown', (e) => {
  if (e.pointerType === 'mouse' && e.button === 2) {
    isRightClickTriggered = true;
    e.preventDefault();
  }
}, true);

// 拦截右键触发的返回操作
window.addEventListener('popstate', (e) => {
  if (isRightClickTriggered) {
    e.preventDefault();
    // 重置标记
    isRightClickTriggered = false;
    // 恢复历史栈，避免影响正常导航
    history.pushState(null, null, window.location.href);
  }
});

// 页面加载时初始化历史状态
window.addEventListener('load', () => {
  history.pushState(null, null, window.location.href);
});

注意事项 #

• 确保测试使用的是较新版本的Android Chrome，旧版本的事件处理逻辑可能存在差异
• 如果页面包含iframe，需要在对应的iframe上下文中添加事件监听
• 若需要自定义右键菜单，可在阻止默认行为后自行实现菜单逻辑

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