如何在Firefox中检测鼠标前进和后退按钮？

问题背景 #

我正在开发一款在线鼠标测试工具，需要支持检测鼠标左键、中键、右键、前进键和后退键。目前使用mousedown事件结合MouseEvent.button属性实现检测，该方案在Chrome 127.0.6533.88中可以正常识别前进键（对应值4）和后退键（对应值3），但在Firefox 128.0.3中点击这两个按键时完全没有响应，控制台无任何输出。

复现步骤 #

• 运行测试代码（需启用JavaScript）
• 在Chrome中点击前进键和后退键，控制台会输出4和3
• 在Firefox中点击前进键和后退键，控制台无输出

测试代码 #

document.addEventListener('mousedown', (e) => {
  e.preventDefault();
  e.stopPropagation();
  console.log(e.button);
  return false;
})

解决方案 #

Firefox默认将鼠标前进/后退键的操作绑定为浏览器导航行为，不会触发mousedown事件，可通过以下两种方式解决：

1. 改用mouseup事件监听 #

Firefox中前进/后退键会触发mouseup事件，修改事件监听类型即可：

document.addEventListener('mouseup', (e) => {
  e.preventDefault();
  e.stopPropagation();
  console.log(e.button);
  return false;
})

注意：mouseup触发时机与mousedown不同，需根据业务场景调整。

2. 使用auxclick事件处理非主键操作 #

auxclick事件专门用于处理鼠标非主键（如前进、后退键）的点击，跨浏览器兼容性更好，同时保留mousedown处理主键：

// 处理左键、中键、右键
document.addEventListener('mousedown', (e) => {
  e.preventDefault();
  e.stopPropagation();
  console.log(e.button);
  return false;
});

// 处理前进、后退键
document.addEventListener('auxclick', (e) => {
  e.preventDefault();
  e.stopPropagation();
  console.log(e.button);
  return false;
});

关键提示 #

• 必须调用e.preventDefault()阻止浏览器默认的前进/后退导航行为，确保事件被自定义代码捕获。
• MouseEvent.button取值跨浏览器一致：3对应后退键，4对应前进键。

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