How to Disable Right-Click Context Menu on a Web Page (With Example)
Learn how to disable using Javascript
How to Disable Right-Click Context Menu on a Web Page (With Example)
Learn how to disable using Javascript
Sometimes, as web developers, we want to control how users interact with our web page. One common trick is to disable the right-click context menu. This is useful when you want to protect images, prevent copying content, or just improve UX by removing unnecessary options.
In this article, you’ll learn how to hide the context menu using simple JavaScript, with a real example and explanation.
Why Hide the Context Menu?
Here are some common reasons:
- To protect copyrighted content like text or images
- To prevent users from downloading images
- To reduce distractions or limit user actions
- To create a cleaner or controlled user experience (like in kiosks or web apps)
How to Disable Right-Click Using JavaScript
The simplest way is to use the contextmenu event in JavaScript.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Disable Right-Click Example</title>
</head>
<body>
<h2>Right-click is disabled on this page</h2>
<p>Try right-clicking anywhere on this page. You won't see the default context menu.</p>
<script>
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
alert("Right-click is disabled on this page.");
});
</script>
</body>
</html>- e.preventDefault(): This stops the browser from showing the context menu.
- alert(...): This is optional. It just informs the user that right-click is disabled.
Where Can This Be Used?
You can use this method on:
- Portfolio websites to protect your designs
- E-learning platforms to prevent copying quiz content
- Web applications where the right-click menu is not needed
- Kiosk or full-screen web apps for better control
Important Note:
Disabling right-click doesn’t fully protect your content. Users with basic knowledge can still access content using developer tools. So, consider this a light layer of protection, not a full security method.
Conclusion
Disabling the right-click context menu is easy with a few lines of JavaScript. It's a simple trick that can improve control over your webpage, especially when protecting UI elements or creating focused user experiences.
Try it on your next project and see how it works for your use cases.
메타데이터
- post_id
- 82ee0464ec44
- slug
- how-to-disable-right-click-context-menu-on-a-web-page-with-example-82ee0464ec44
- url
- https://medium.com/@bhavesh.doshi/how-to-disable-right-click-context-menu-on-a-web-page-with-example-82ee0464ec44
- canonical_url
- https://medium.com/@bhavesh.doshi/how-to-disable-right-click-context-menu-on-a-web-page-with-example-82ee0464ec44
- author_url
- https://medium.com/@bhavesh.doshi
- status
- ok
- fetched_at
- 2026-08-11 11:41:10
