How to Disable Right-click with JavaScript/jQuery

To disable right-click on your page, you need to add the oncontextmenu event and “return false” in the event handler. It will block all access to the context menu from the mouse right-click.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  </head>
  <body>
    <h2>Copy and cut disabled</h2>
    <p>I am a text and you cannot copy or cut me.</p>
    <script>
      $(document).ready(function() {
          $('body').bind('cut copy', function(e) {
              e.preventDefault();
            });
        });
    </script>
  </body>
</html>

Use the bind() jQuery function to disable the right-click feature. This method disables the right-click (context menu) feature on a text field and also alerts the user with a popup message.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  </head>
  <body>
    <h2>Right-click disabled</h2>
    <p>For this page the right-click is disabled.</p>
    <script>
      $(document).ready(function() {
          $("body").on("contextmenu", function(e) {
              return false;
            });
        });
    </script>
  </body>
</html>

Leave a comment

Your email address will not be published. Required fields are marked *