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

Answer 2

The property you're looking for is e.button or e.buttons.

The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2.
_{– MDN:Web/Events/click}

However, with or without react, I'm only getting click events with the left mouse button (trackpad). You could use onMouseDown which works for me.

Here's a demo using e.buttons. You may want to preventDefault in onContextMenu also.