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

小编典典

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

reactjs

我试图区分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 。对于合成事件未定义。如何在此处区分左键和右键？

阅读 524

2020-07-22

共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，输出

2020-07-22