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.
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.
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.
1.<body oncontextmenu="return false;">2....3.</body>
Or on other elements:
1.<canvas oncontextmenu="return false;"></canvas>
More JavaScript Snippets
Popular Articles
I Can't Believe It's Not CSS: Styling Websites with SQL
Style websites using SQL instead of CSS. Database migrations for your styles. Because CSS is the wrong kind of declarative.
How I Built an Oreo Generator with 1.1 Sextillion Combinations
Building a web app that generates 1,140,145,285,551,550,231,122 possible Oreo flavor combinations using NestJS and TypeScript.
AI Model Names Are The Worst (tier list)
A comprehensive ranking of every major AI model name, from the elegant to the unhinged. Because apparently naming things is the hardest problem in AI.