如何监听鼠标侧键点击事件？

南宫炜曦提问于 2026-03-11 16:25:23 阅读 7

交互

我在做一个需要支持鼠标侧键操作的网页应用，但发现常规的 click 事件根本捕获不到侧键（比如前进/后退那两个按键）。我试过用 mousedown，但 event.button 的值在不同浏览器里表现不一致，有的返回 3、4，有的干脆没反应。有没有靠谱的办法能准确识别并响应鼠标侧键？

下面是我目前测试用的简单结构：

<div id="area" style="width: 200px; height: 200px; background: #eee;">
  点击区域
</div>
<script>
  document.getElementById('area').addEventListener('mousedown', (e) => {
    console.log('Button:', e.button);
  });
</script>

侧键功能鼠标交互

我来解答赞 2 收藏

反馈

1 条解答

Newb.迁迁 Lv1

鼠标侧键的问题确实恶心，浏览器兼容性问题一堆。

的值是对的，3 是后退键，4 是前进键。问题是某些浏览器只在 mouseup 事件里才给你返回正确的值，而且这两个键在浏览器里有默认行为（后退/前进），得先 preventDefault 拦截掉。

改一下就行：

const area = document.getElementById('area');



// 用 mouseup 更靠谱，部分浏览器 mousedown 不触发侧键

area.addEventListener('mouseup', (e) => {

  if (e.button === 3) {

    e.preventDefault(); // 阻止浏览器后退

    console.log('点击了后退键');

  } else if (e.button === 4) {

    e.preventDefault(); // 阻止浏览器前进

    console.log('点击了前进键');

  }

});



// 也加上 mousedown，双重保险

area.addEventListener('mousedown', (e) => {

  if (e.button === 3) {

    e.preventDefault();

    console.log('后退键 mousedown');

  } else if (e.button === 4) {

    e.preventDefault();

    console.log('前进键 mousedown');

  }

});

另外注意，Chrome 之类的浏览器默认把这两个键的默认行为绑死了，光 preventDefault 有时候还不够。如果你的应用跑在页面内部（不是 iframe），大多数情况下上面这招够用了。

如果是在 iframe 里被限制了，可以考虑用 pointer-events: none 之类的 CSS 技巧，或者直接放弃这两个键的功能——毕竟用户体验也比较奇怪，很多人根本不知道鼠标还有侧键。

2026-03-11 17:00