Skip to content
Related Articles
Open in App
Not now

Related Articles

How to disable right click on web page using JavaScript ?

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 13 Jan, 2023
Improve Article
Save Article

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.

JavaScript 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

html




<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>


Output:

How to disable right click on web page using JavaScript ?

How to disable right click on web page using JavaScript?

Example 2: This example disables 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. 

html




<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>


Output:

How to disable right click on web page using JavaScript ?

How to disable right click on a web page using JavaScript ?


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!