This article will describe the procedure to disable right-clicking on a web page.
How to Disable Right Click on a Web Page?
To disable right-click, use the page’s “contextmenu” event with the help of the “eventListener()” method. Then, call the “preventDefault()” method to prevent the default context menu to appear on a web page.
As you can see in the given GIF, when the right button of the mouse is pressed, a context menu appears:
To disable this context menu or right click, follow the given examples using JavaScript and HTML.
Example 1: Disable Right Click on Web Page Using JavaScript
For disabling right-click context menu, use the below-given code snippet in the <script> tag or a JavaScript file:
event.preventDefault();
});
The above-following code snippet calls the “eventListener()” method on the page’s “contextmenu” event, which is fired when the right mouse button is clicked. Then, call the “preventDefault()” method on the event to prevent the default context menu from appearing.
It can be seen that when clicking on the page with the right mouse button, nothing will be displayed:
Example 2: Disable Right Click on Web Page Using HTML
Sometimes, you need to disable content on specific elements, such as “div” or “img”. For this, use the “oncontextmenu” attribute on the element:
Right click is Disabled Here...
</div>
Here, you can see that the right click has been disabled only on the “div” element:
We have compiled all the basic information related to disabling the right click of the mouse button on the web page.
Conclusion
To disable the right-click on the web page, use the “contextmenu” event in JavaScript and also you can do it by HTML using the “oncontextmenu” attribute on the element. In JavaScript, use the “preventDefault()” method on the “contextmenu” event to prevent the default context menu from appearing. This article described the procedure for disabling right-clicking on a web page.
