How to disable right-clicking on a website using JavaScript?

Disabling right-clicking on a website using JavaScript is a common practice to prevent users from accessing context menus or copying content. However, it’s important to note that disabling right-clicking can be bypassed by knowledgeable users and can also lead to a poor user experience. Nevertheless, if you still want to proceed with it, you can use the following JavaScript code:

document.addEventListener('contextmenu', function (event) {
  event.preventDefault();
});

This code attaches an event listener to the contextmenu event, which is triggered when the right mouse button is clicked. When the event is fired, the preventDefault() function is called, which stops the browser’s default context menu from appearing.

Keep in mind that this method can be easily bypassed by users who have JavaScript disabled or are using alternative browsers or tools. Additionally, it’s worth considering the impact on usability and accessibility, as some users rely on the right-click functionality for various purposes.

Steps

To disable the right−click context menu on a webpage using JavaScript, you can follow these steps:

Step 1 − Create an HTML page with a script element.
Step 2 − In the script element, use the addEventListener method to attach an event listener function to the contextmenu event.
Step 3 − In the event listener function, use the preventDefault method to cancel the default action of the event.

Example 1

In this example, we disable right-click using the “contextmenu” event.

<!DOCTYPE html>
<html>
<head>
   <title>Example</title>
</head>
<body>
   <h2>Disabling right-clicking on a webpage using JavaScript</h2>
   <p> Right Click is disabled</p>
   <script>
      document.addEventListener("contextmenu", (event) => {
         event.preventDefault();
      });
   </script>
</body>
</html>

Example 2

Using the oncontextmenu attribute

You can use the oncontextmenu attribute to attach a JavaScript function to an element that will be called when the contextmenu event is triggered. This can be a convenient way to handle the contextmenu event if you only need to cancel the default behavior of the right−click and do not need to perform any other actions.

Here’s an example of how you might use the oncontextmenu attribute −

<!DOCTYPE html>
<html>
<head>
   <title>Example</title>
</head>
<body>
   <h2>Disabling right-clicking on a webpage</h2>
   <div oncontextmenu="return false;">
      Right-clicking on this element is disabled.
   </div>
</body>
</html>

Contain table:

Following my social platform

Web	www.mytechtrips.com
Join telegram channel	Click here
Join WhatsApp group	Click here
Facebook	Click here
Instagram	Click here
Youtube Channel 1	Click here
Youtube Channel 2	Click here

Steps

Example 1

Example 2

Ads Blocker Detected!!!