React Synthetic Event区分左键单击事件和右键单击事件

React Synthetic Event distinguish Left and Right click events

本文关键字：单击 事件 右键 Synthetic Event React      更新时间：2023-09-26

我正在尝试区分onClick函数中的左键和右键点击：

const App = () => {
  const handleClick = (e) => {
    // detect a left click
    if (e.which == 1){ 
      // do something
    }
  };
  return <p onClick={handleClick}>Something</p>;
};

事实证明e.which对于合成事件是未定义的。如何在此处区分左键单击和右键单击？

在现代版本的React（v16+）中，需要传递onClick和onContextMenu道具来检测左键和右键事件：

return <p onClick={handleClick} onContextMenu={handleClick}>Something</p>

您可以检查e.nativeEvent.button（正如另一个答案所暗示的那样），也可以检查合成事件本身的e.type。

使用e.type

const handleClick = (e) => {
  if (e.type === 'click') {
    console.log('Left click');
  } else if (e.type === 'contextmenu') {
    console.log('Right click');
  }
};

使用e.nativeEvent

const handleClick = (e) => {
  if (e.nativeEvent.button === 0) {
    console.log('Left click');
  } else if (e.nativeEvent.button === 2) {
    console.log('Right click');
  }
};

下面是一个更新的演示，演示了它的工作原理。

您可能还想阅读SyntheticEvent的React文档。

（原始演示）

您要查找的属性是e.button或e.buttons。

触发鼠标事件时按下的按钮编号：左键=0，中键=1（如果存在），右键=2。
-MDN:Web/Events/click

然而，无论有没有反应，我都只能通过鼠标左键（触控板）获得点击事件。你可以在MouseDown上使用，它对我有效。

下面是一个使用e.buttons的演示。您可能还需要在onContextMenu中防止Default。

使用：

if (e.button === 0) { // or e.nativeEvent.which === 1
    // do something on left click
}

这是一个演示

onContextMenu={e => console.log("right-click")}

onClick={e => console.log("left-click")}

我在React的官方文档"；鼠标事件"；部分

以下是onContextMenu的合成事件的TypeScript定义。

我用来区分左键和右键点击的方法：

const buttons = {
  left: 0,
  middle: 1,
  right: 2,
};
export const App = () => {
  const handleChange = (e) => {
    if (e.button === buttons.left) {
      console.log('left');
    } else if (e.button === buttons.middle) {
      console.log('middle');
    } else if (e.button === buttons.right) {
      console.log('right');
    }
 };
 return (
    <div onContextMenu={(e) => e.preventDefault()} onMouseDown={handleChange}>
      Click me!
    </div>
 );
};
相关文章：