如何在React JS中检测鼠标中键点击事件？

我之前也踩过这个坑！React的onClick合成事件在处理中键点击时确实不太靠谱，你遇到的mouseClickEvent.button === 1代码完全不执行的情况，主要有两个核心原因：

1. 浏览器对中键点击的默认行为（比如链接中键打开新标签页）会干扰click事件的触发，很多浏览器甚至不会为中键触发原生click事件，自然React的合成onClick也捕获不到。
2. React的onClick合成事件本身对中键的支持就不完善，它的设计更偏向于处理左键的常规点击交互。

靠谱的解决方案：用onMouseDown/onMouseUp替代onClick #

这两个事件能更稳定地捕获所有鼠标按键的操作，包括中键。你可以参考下面的代码实现：

import React from 'react';

const App = () => {
  const handleMouseDown = (e) => {
    // 检测中键点击
    if (e.button === 1) {
      console.log("中键点击成功触发！");
      // 若需要阻止浏览器默认行为（比如打开新标签），记得调用这个
      e.preventDefault();
      
      // 这里添加你的业务逻辑
    }
  };

  return (
    <div 
      style={{padding: '20px', border: '1px solid #ccc'}}
      onMouseDown={handleMouseDown}
    >
      试试用中键点击我
    </div>
  );
};

export default App;

额外注意事项 #

• 如果你的元素是<a>标签，一定要调用e.preventDefault()，否则浏览器会优先执行中键打开新标签的默认行为，你的自定义逻辑可能不会按预期执行。
• 测试时尽量关闭浏览器的相关插件，避免插件拦截鼠标事件影响结果。

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