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

你也可以做这样的事情。 有 onClick 和 onContextMenu 处理程序

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

您可以按照其他答案的建议检查nativeEvent或检查type 。 （另外，如果是右键单击，请防止默认。）

使用type

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

使用nativeEvent

handleClick: function(e) {
  if (e.nativeEvent.which === 1) {
    console.log('Left click');
  } else if (e.nativeEvent.which === 3) {
    console.log('Right click');
  }
}

这是一个演示http://jsbin.com/seyeliv/edit?html,output

Answer 2

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

鼠标事件触发时按下的按钮编号：左键=0，中键=1（如果存在），右键=2。
_{– MDN:Web/事件/点击}

但是，无论是否有反应，我只能使用鼠标左键（触控板）获得点击事件。 您可以使用对我有用的 onMouseDown。

这是一个使用e.buttons的演示。 您可能还想在 onContextMenu 中防止默认。

Answer 3

用：

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

这是一个演示

Answer 4

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


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

我在“鼠标事件”部分的React 官方文档中找到了这个解决方案。

这是 onContextMenu 合成事件的TypeScript 定义。

Answer 5

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

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>
 );
};