Open In App

How to disable right click on web page using JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

Disabling right-click on a web page can be done using the DOM Events. It is a client-side action, and it can be achieved using JavaScript.

However, it’s important to note that attempting to prevent right-clicking is not a foolproof method for protecting your content, as users can easily bypass it by disabling JavaScript or using browser features.

To disable right click on web page in JavaScript we can use the methods given below:

HTML DOM addEventListener() Method

The addEventListener() Method attaches an event handler to the specified element.

Syntax: 

document.addEventListener(event, function, useCapture)

JavaScript preventDefault() Event Method

The preventDefault() 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 for disabling the Right Click on Web Page

The below examples uses the above mentioned method to disable the right click.

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;">
        GeeksforGeeks
    </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;">
        GeeksforGeeks
    </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:



Last Updated : 05 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads