disable right click using javascript

How to Disable Right Click on Web Page Using JavaScript

Sometimes you may want to disable right click on your web pages or web apps, or prevent displaying its default context menu in case you don’t want users to be able to use right clicks. This is useful if you want to provide custom functionality on right clicks. For example, in Google Drive, if you right click, you will not see the default context menu offered by your web browser but a different menu altogether. This is also useful in case you are building web-based video games where the default context menu might not be useful. However, please note, if you want to disable right click just to protect your source code, then it is not of much use, since there are many other ways to view your web pages’ code. Nevertheless, in this article, we will learn how to disable right click on web page using JavaScript.

How to Disable Right Click on Web Page Using JavaScript

There are several different ways to disable right click on web pages.

1. Without Using JavaScript

The simplest way to disable right click on your web page is to add oncontextmenu=”return false;” on your web page’s body tag.

<body oncontextmenu="return false;">

2. Using JavaScript

If the above method does not work in your web browser, you can try using JavaScript to disable right click on your web page. Add the following JavaScript tag to your HTML page to disable right click on it.

<script type="javascript/text">
  document.addEventListener('contextmenu', event => event.preventDefault());
</script>

Alternatively, you can also use the following JavaScript code for the same functionality.

<script type="javascript/text">
   document.addEventListener("contextmenu", function (e){
    e.preventDefault();
    //optional code to display your own menu
   
   }, false);
</script>

3. Using jQuery

You can also third party JavaScript libraries like jQuery to disable right clicks on your web pages. Please note, in this case, when you right click, jQuery will fire 3 events – contextmenu, mousedown and mouseup. So we have added event handlers for all these 3 events and disabled contextmenu.

// With jQuery
$(document).on({
    "contextmenu": function (e) {
        console.log("ctx menu button:", e.which); 

        // Stop the context menu
        e.preventDefault();

       //optional code to display your own menu
    },
    "mousedown": function(e) { 
        console.log("normal mouse down:", e.which); 
    },
    "mouseup": function(e) { 
        console.log("normal mouse up:", e.which); 
    }
});

In this article, we have learnt how to disable the display default context menu on right click in web browser. If you want, you can display your own custom menu immediately after the context menu is disabled, in above code snippets.

Also read:

How to Disable/Enable Input in jQuery
How to Run 32-bit App on 64-bit Linux
How to Change File Extension of Multiple Files in Python
How to Change File Extension of Multiple Files in Linux
How to Remove HTML Tags from CSV File in Python

Leave a Reply

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