How to Disable Right-Click Context-Menu in JavaScript

How to disable right-click context-menu in JavaScript

Capture the onContextMenu event, and return false in the event handler.

You can also capture the click event and check which mouse button fired the event with event.button, in some browsers anyway.

Prevent context menu from opening on a right click over element

The easiest way is with some very simple JavaScript:

<div class="myElement" oncontextmenu="return false;"></div>

• oncontextmenu: event fires when the context menu (right-click menu) is shown.
• return false;: cancels the event; which stops the menu from showing.

Yet better, instead of using inline JS, create a reusable className .js-noMenu and add it to any element that should prevent right clicks.

Place the JS lines into your Javascript file.

[...document.querySelectorAll(".js-noMenu")].forEach( el =>  el.addEventListener('contextmenu', e => e.preventDefault()));

<div class="js-noMenu">Right click me!</div><p>You <b>can</b> contextmenu me!</p><p class="js-noMenu">You cannot here</p>

How do I disable right click on my web page?

You can do that with JavaScript by adding an event listener for the "contextmenu" event and calling the preventDefault() method:

document.addEventListener('contextmenu', event => event.preventDefault());

That being said: DON'T DO IT.

Why? Because it achieves nothing other than annoying users. Also many browsers have a security option to disallow disabling of the right click (context) menu anyway.

Not sure why you'd want to. If it's out of some misplaced belief that you can protect your source code or images that way, think again: you can't.

Disable Context Menu (Right click) with Javascript

Here's how to override the contextmenu event handler:

document.addEventListener("contextmenu", function(e) {
  e.preventDefault();
  alert('Right click');

  // Or, in you case: markField()
});

Note: using document is not a requirement. It will work on any DOM node. Alternatively, you can make the blockage conditional by checking the target of e.

Fiddle: https://jsfiddle.net/h1jdr1ew/1/

Disabling right click context menu on a HTML Canvas?

You can use this:

$('img').bind('contextmenu', function(e){
    return false;
}); 

See this working example!

With the lastest jQuery:

$('body').on('contextmenu', 'img', function(e){ return false; });

Note: You should use something narrower than body if possible!

Or without jQuery, applying on canvas:

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

---

EDITED

Updated the Fiddle Example to show the contextmenu being limited to the canvas and not the image.

JQUERY

$('body').on('contextmenu', '#myCanvas', function(e){ return false; });

HTML EXAMPLE

<canvas id="myCanvas" width="200" height="100">
  Your browser does not support the canvas element.
</canvas>

<img src="http://db.tt/oM60W6cH" alt="bubu">

Disable right click on canvas

try:

<canvas oncontextmenu="return false;"></canvas>

How to disable right click menu in html?

Assuming this for a web app...

I also had to do this and used Javascript

 document.addEventListener("contextmenu", function (e) {
        e.preventDefault();
    }, false);

Should do the trick
Thanks

Disable Firefox's right click context menu in React

A coworker helped me figure this out. It was a problem with my firefox setup that came preconfigured on my work computer. To fix it I had to go to about:config url in firefox, and change the dom.event.contextmenu.enabled value by double clicking. This changed it from “modified boolean false” to “default boolean true”. Expected behavior with e.preventDefault() follows

---

Related Topics