How to disable right click on web page using JavaScript ? - GeeksforGeeks

23 May, 2019
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.
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.
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.
<!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>                    
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.
<!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 = "https://media.geeksforgeeks.org/wp-content/uploads/20190521140445/gfglogo2.png"/>                  <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>                    
Output:
Before clicking on the button:
After clicking on the button:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?