CODEWITHSUNDEEP
javascriptreactjscanvashtml5-canvasdom-events
Vikramaditya
Vikramaditya

Reputation: 5584

Disable Right Click in React.JS

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.

Upvotes: 13

Views: 19573

Answers (2)

Rob Faust
Rob Faust

Reputation: 76

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} ...>;

Upvotes: 2

webpopular.net
webpopular.net

Reputation: 179

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

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

Upvotes: 12

Related Questions