React Synthetic Event distinguish Left and Right click events
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
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.
Use:
if (e.button === 0) { // or e.nativeEvent.which === 1 // do something on left click}