Disable the right-click context menu in JavaScript?

Manoj Kumar — Thu, 06 Jun 2024 17:30:31 +0000

The context menu, accessible by right-clicking on a webpage element, is a handy tool for users. It offers quick actions like copying text, saving images, or inspecting the page code. But have you ever wondered if it's possible to disable this menu?

Yeah, we can disable the context menu! Let's see how we can implement that on our webpages.

Disable for Whole Page

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

Disable using oncontextmenu

<body oncontextmenu="return false;">
   <div>
       Page Content
   </div>
</body>

Disable for specific element without

const disableClick = document.getElementId("component");

disableClick.addEventListener("contextmenu", e => e.preventDefault());

Limitations and Considerations

Ineffective Protection: Disabling the context menu doesn't truly safeguard your content. Savvy users can still access the source code or copy images using browser developer tools or extensions.
User Workarounds: Tech-savvy users can bypass these methods, rendering them ineffective.
Browser Safeguards: Modern browsers often have built-in features that prevent websites from completely disabling the context menu.

DEV Community: Manoj Kumar

Disable the right-click context menu in JavaScript?

Disable for Whole Page

Disable using oncontextmenu

Disable for specific element without

Limitations and Considerations