如何在ReactJS中使用onMouseDown检测鼠标滚轮键（mouse3）按下事件

你可以通过鼠标事件的button属性识别滚轮键按下，该属性在React合成鼠标事件中已做兼容，各按键对应值如下：

• 鼠标左键：0
• 鼠标滚轮键/中键（即你所说的mouse3）：1
• 鼠标右键：2

代码修改示例 #

你只需在原有的handleEvent函数中新增对应判断即可：

const handleEvent = (event) => {
  if (event.type === 'mousedown') {
    // 检测滚轮键按下
    if (event.button === 1) {
      // 此处写入滚轮键按下后的业务逻辑
      // 若要阻止浏览器默认中键行为（如自动滚动、新标签页打开链接），可添加 event.preventDefault()
    }
    console.log('MOUSE DOWN', event);
  } else {
    console.log('MOUSE UP', event);
  }
};

补充说明 #

如果需要实现按住滚轮键拖拽的交互，可同时监听onMouseMove、onMouseUp事件，配合全局状态标记是否处于中键按下的状态即可。

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