In this article, we will see how to disable the right-click mouse button on the page using JavaScript. 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 a required parameter. It specifies the string which is the name of the event.
- function: It is a 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 an 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 canceled, 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
<!DOCTYPE html><html lang="en"><head> <title> How to disable right click on web page using JavaScript ? </title></head><body style="text-align: center;"> <h1 style="color:green;"> neveropen </h1> <h3> How to disable right click on web page using JavaScript ? </h3> <button onclick="Fun_call()"> Disable Right Click </button> <h3 id="GFG" style="color:green;"> </h3> <script> let elm = document.getElementById("GFG"); function Fun_call() { document.addEventListener('contextmenu', event => event.preventDefault()); elm.innerHTML = "Right click disabled"; } </script></body></html> |
Output:
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
<!DOCTYPE html><html lang="en"><head> <title> How to disable right click on web page using JavaScript ? </title></head><body style="text-align: center;"> <h1 style="color:green;"> neveropen </h1> <h3> How to disable right click on web page using JavaScript ? </h3> <img src= <br><br> <button onclick="Fun_call()"> Disable Right Click </button> <h3 id="GFG" style="color:green;"> </h3> <script> let elm = document.getElementById("GFG"); function Fun_call() { document.addEventListener("contextmenu", function (e) { if (e.target.nodeName === "IMG") { e.preventDefault(); } }, false); elm.innerHTML = "Right click disabled on image"; } </script></body></html> |
Output:
