How to Disable the Right-Click Context Menu in HTML
- Possible Reasons for Disabling the Right-Click
- Why Disabling Right-Click Is Not a Good Idea
- Disable the Right Click Using HTML Event Handler
- Disable the Right Click Using JavaScript
- Disable Right Click on Images
This article will concentrate on the browser’s right-click context menu. We’ll learn why developers think they should disable the context menu, and also we will observe the reasons why they shouldn’t.
Later, we’ll go through different strategies for disabling right-clicking on our websites.
Possible Reasons for Disabling the Right-Click
Here, we will explain why we should refrain from disabling the right-click on our websites.
As a blogger or developer, you do not want your work stolen after you have worked hard and creatively to produce it. If you invested significant time and effort in creating a design, an image, or a piece of text, you might want to secure it by preventing right-clicks on your website.
We frequently come across websites that disable right-clicking. This may appear to be an excellent idea, but it is not.
Why? We will discuss this later. Let us first discover why we believe we need to disable the right click.
To Protect the Content
Every website has some written information on it. Writers sometimes devote a lot of time to creating the most valuable and practical content for their websites.
Nobody wants their work to be published elsewhere under a different identity. So they disable right-clicking to avoid duplicating and utilizing their content being copied and used on other websites.
To Protect the Images
Most of the time, website owners invest significantly in purchasing photographs of an excellent caliber to use as content. They typically feel squandered when individuals get them for free and utilize them on their websites; hence, they disable right-clicking to protect the photographs.
To Protect the Source Code
Developers make a lot of effort to create unique and innovative websites. Writing HTML, CSS, and JavaScript code for a visually appealing and functional website requires significant time and effort.
Some web designers steal the source code of other people’s websites, make a few modifications, and then publish the results as their own. So, developers believe that disabling page source viewing on their website is an excellent strategy to safeguard their website source code.
To Meet the User Requirements
Sometimes disabling the right-click is a requirement of the web application. It depends upon the audience the application is targeting.
For example, a hospital system is made for patients who don’t have much tech knowledge and end up clicking on unwanted options. So to keep the design simple for them, all the unnecessary clicking is set to disable.
Why Disabling Right-Click Is Not a Good Idea
We have discussed the needs developers think of to disable the right-click on their websites, but we said it is not an efficient approach. Let’s discuss why.
Annoying for the User
Disabling right-clicking does nothing but anger your website users. It just makes using your website more complex and less user-friendly.
Right-click menu provides many useful options to the user. The Chrome web browser offers the Translation option to the users, translating the website into the user’s selected language.
Another essential feature in the right-click menu of Chrome is sharing the link between your devices, allowing the users to send directly any link from their PC to their phone and vice-versa.
No Impact on the Security
Disabling the right click isn’t security. It has no effect other than making it easier to save items off a page.
Using developer mode in a browser or disabling JavaScript will work. We can access the source code via the Ctrl+U shortcut key and inspect using Ctrl+Shift+I.
If developers disable right-clicking to make their website more secure, they are going in the wrong direction. The right-click menu is disabled using JavaScript, and we can easily disable JavaScript functionality in browsers.
It Is Pointless
Think again if you believe disabling right-click will secure your source code or photos. Anyone determined to steal your content or code will do it regardless of their ability to access a browser context menu.
As we discussed, these context menus provide convenient features to the users, and by disabling them, you are just restricting your users from using valuable features.
Many people now read online, and sometimes, there is a link in the website they wish to open in a new tab. Now, browsers give this feature in the context menu, and users will be annoyed if the menus are disabled.
However, there is a shortcut key for this. If we click on the link while holding the Ctrl key, it will take us to the new tab, and if we click on the link while holding the Shift key, it will take us to the new window.
But there is a considerable possibility that users may not know this, and it’ll be a disturbance for them.
Catches Unwanted Attention
Disabling right-click makes some people more determined to figure out what you’re hiding. And this could backfire by drawing unwanted attention to your pictures and source code.
Additionally, you can only disable right-clicking on browsers that have JavaScript enabled. Visitors can completely ignore the script by turning off JavaScript in their browser’s settings.
Disable the Right Click Using HTML Event Handler
Until now, we have discussed the reasons a developer thinks for disabling the right-click context menu on their websites and some reasons why we should not do this. Now, let’s discuss some methods to disable the right click.
We can easily disable the right-click context menu on our website using the oncontextmenu in our HTML elements. When someone right-clicks on an HTML element to display the context menu, the oncontextmenu event is triggered.
Check the code below to understand this.
<html>
<body oncontextmenu="return false">
<p>
You cannot right-click here.
</p>
</body>
</html>
We set oncontextmenu as equal to false. This means when the user right-clicks to open the context menu on any website, it will return false, and the menu will not open.
You may have noticed that we put the oncontextmenu on the body tag, meaning right-clicking on the HTML’s body will not trigger the context menu. There is no need to disable right-clicking on the whole page.
If your only purpose for disabling the menu is to protect your images, you can just put the oncontextmenu on the image tag.
Disable the Right Click Using JavaScript
We can also use JavaScript to accomplish the same goal. Check out the code below to see how we can use JavaScript to achieve our desired functionality.
<html>
<head>
<script>
document.addEventListener('contextmenu', event => event.preventDefault());
</script>
</head>
<body>
You cannot right-click here.
</body>
</html>
The addEventListener() function adds an event handler to the element specified. The first parameter is the event type (like any HTML DOM Event), and the second parameter specifies the function to be called when the event happens.
If the event is cancellable, the preventDefault() method will stop the event’s default action from taking place.
Disable Right Click on Images
In this method, we will focus only on protecting the images of our website. As we discussed above, disabling the right click on the whole page does not leave a good impression on the users.
We can do that easily with the help of JavaScript. We can target only the image tag of HTML instead of the whole body of an HTML page.
Check the code below to understand how.
<html>
<head>
<script>
document.addEventListener("contextmenu", function(e){
if (e.target.nodeName === "IMG") {
e.preventDefault();
}
}, false);
</script>
</head>
<body>
<img src="/img/DelftStack/logo.png"/>
</body>
</html>
Let’s take an in-depth look at the code.
We believe you understand JavaScript’s addEventListener() function at this point. We’ve previously gone through the function’s parameters, so let’s look at the second one, which represents a function that will be triggered when the event specified in the first parameter occurs.
When an event occurs, the element that causes the event is referred to as the emitter, referred to as the target, or simply saying, the target returns the DOM element that triggered a specific event. The nodeName function returns the element’s node name.
In conclusion, e.target.nodeName returns the element name on which the user right-clicks. In the code, we validated that if the clicked element name is IMG, it should not perform the event specified in the first parameter.