How to disable right click in canvas in ReactJS. Here is what I tried which is still not working:

let Canvas = <canvas onContextMenu={(e)=>  {e.preventDefault(); return false;}} height={500} width={500} ref="canvas"/>;

A warning is also shown in browser console.

Warning: Returning false from an event handler is deprecated and will be ignored in a future release. Instead, manually call e.stopPropagation() or e.preventDefault(), as appropriate.

EDIT: Yes it did stop the right click functionality on Canvas, but my problem is: I am drawing a point on left click, and it is also being drawn on right click, I want to disable that.

How to disable right click in canvas in ReactJS. Here is what I tried which is still not working:

let Canvas = <canvas onContextMenu={(e)=>  {e.preventDefault(); return false;}} height={500} width={500} ref="canvas"/>;

A warning is also shown in browser console.

Warning: Returning false from an event handler is deprecated and will be ignored in a future release. Instead, manually call e.stopPropagation() or e.preventDefault(), as appropriate.

EDIT: Yes it did stop the right click functionality on Canvas, but my problem is: I am drawing a point on left click, and it is also being drawn on right click, I want to disable that.

• javascript
• reactjs
• canvas
• html5-canvas
• dom-events

• Works fine for me – Brigand Commented Jan 27, 2016 at 17:49

2 Answers 2

This JS function will prevent bubbling of the contextmenu event, thus preventing the context menu from appearing:

canvas.oncontextmenu = function (e) {
    e.preventDefault();
};

You could prevent the right-click from actually doing anything by simply ignoring it, like this:

handleMouseDown = e => {
  if (e.button === 0)
  {
    // Actions to perform when left mouse button is clicked, like update state
  }
}

let Canvas = <canvas onMouseDown={this.handleMouseDown} ...>;