javascript - React Synthetic Event distinguish Left and Right click events

Question

I am trying to distinguish between left and right clicks in an OnClick function. But,

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

Turns out e.which is undefined for Synthetic Events. How can I distinguish between left and right clicks here?

Answer 1

You can do something like this too. Have both onClick and onContextMenu handlers

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

You can either check for nativeEvent as the other answer suggests or check for type. (Also, prevent default if it is a right click.)

Using type

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

Using nativeEvent

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

Here is a demo http://jsbin.com/seyeliv/edit?html,output