Question

我试图在OnClick函数中区分左键和右键。但是，

var r = React.createClass({
   handleClick : function(e){
       //left click
       if(e.which==1){ 
          //Do something
       }
   },
   render : function(){
       return <p onClick={this.handleClick}>Something </p>
   }
});

结果是合成事件未定义的e.which。如何区分左右点击？

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/Events/click}

然而，无论有没有反应，我只能用鼠标左键（触控板）获取点击事件。你可以使用对我有用的onMouseDown。

此处使用e.buttons demo。您可能还希望在onContextMenu中使用preventDefault。

Answer 3

使用：

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

Here is a DEMO

React Synthetic Event区分左右点击事件

3 个答案: