javascript - React Synthetic Event 区分左击和右击事件

Question

我试图在 onClick 函数中区分左键单击和右键单击:

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

原来 e.which 未定义 Synthetic Events .如何区分此处的左键单击和右键单击？

Answer 1

在现代版本的 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');
  }
};

这是一个 updated demo演示这是如何工作的。

您可能还想阅读 React documentation for SyntheticEvent .

(original demo)