How to Disable Right Click Context Menu in Javascript

/

March 29, 2020

Disable browser right-click for the whole page

The browser fires the contextmenu event when you right-click on a page. The context menu usually has a list of actions like “View Page Source” and “Back”. We can prevent this menu from appearing on right-click by latching onto the contextmenu event and using event.preventDefault(). If we add this event listener to the window object then we can prevent right-clicking on the whole page.

js
1.window.addEventListener("contextmenu", e => e.preventDefault());

Disable browser right-click for specific element

We can prevent right-clicking on any element by attaching the event listener to that specific element and calling event.preventDefault() again.

js
1.const noRightClick = document.getElementId("myElement");
2.
3.noRightClick.addEventListener("contextmenu", e => e.preventDefault());

Disable context menu using oncontextmenu on an element

We can also disable the context menu by returning false on the oncontextmenu attribute on the body element.

html
1.<body oncontextmenu="return false;">
2. ...
3.</body>

Or on other elements:

html
1.<canvas oncontextmenu="return false;"></canvas>