How to disable right click on web page using JavaScript ?

JavaScript methods are used to disable the right click on the page. The used methods are listed below:

  • HTML DOM addEventListener() Method: This method attaches an event handler to the document.

    Syntax:

    document.addEventListener(event, function, useCapture)
    

    Parameters:

    • event: It is required parameter. It specifies the string which is name of the event.
    • function: It is required parameter. It specifies the function to run when the event occurs. When the event occurs, an event object is passed as the first parameter to the function. The type of the event object depends on the defined event. For example, the “click” event is of MouseEvent object.
    • useCapture: It is optional parameter. It specifies the boolean value that whether the event should be executed in the capturing or in the bubbling phase.
    • true: It specifies that the event should execute in the capturing phase.
    • false: It specifies that the event should execute in the bubbling phase.
  • preventDefault() Event Method This method cancels the event if it can be cancelled, meaning that it stops the default action that belongs to the event. For example- Clicking on a “Submit” button, prevent it from submitting a form.

    Syntax:

    event.preventDefault()
    

    Parameters: It does not accept any parameter.

Example 1: This example disable the right click by adding an event listener for the “contextmenu” event and calling the preventDefault() method.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            Disable right click on my web page
        </title>
    </head
      
    <body style = "text-align:center;"
          
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1
          
        <p id = "GFG_UP" style = "font-size: 16px; font-weight: bold;"
        </p>
          
        <button onclick = "gfg_Run()"
            Disable
        </button>
          
        <p id = "GFG_DOWN" style
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            el_up.innerHTML = "Click on the button to disable right click";
              
            function gfg_Run() {
                document.addEventListener('contextmenu', 
                        event => event.preventDefault());
                el_down.innerHTML = "Right click disabled";
            }         
        </script
    </body
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example disable the right click on the image by adding an event listener for the “contextmenu” event and calling the preventDefault() method. Because, Sometimes we do not want the user to save the image.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            Disable right click on my web page
        </title>
          
        <style>
            img {
                border: 1px solid;
            }
        </style>
    </head
      
    <body style = "text-align:center;"
      
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1>
          
        <img src
          
        <p id = "GFG_UP" style = "font-size: 16px; font-weight: bold;"
        </p>
          
        <button onclick = "gfg_Run()"
            Disable
        </button>
          
        <p id = "GFG_DOWN" style
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            el_up.innerHTML =
                "Click on the button to disable right click on image";
                  
            function gfg_Run() {
                document.addEventListener("contextmenu",                         
                  
                function(e) {
                    if (e.target.nodeName === "IMG") {
                        e.preventDefault();
                    }
                }, false);
                  
                el_down.innerHTML = "Right click disabled on image";
            }         
        </script
    </body
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.