How to disable right click on web page using JavaScript ?

Last Updated : 05 Mar, 2024

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:

Table of Content

HTML DOM addEventListener() Method
JavaScript preventDefault() Event Method

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=
"https://media.geeksforgeeks.org/wp-content/uploads/20190521140445/gfglogo2.png" />
    <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:

PranchalKatiyar

Improve

Article Tags :

How to disable right click on web page using JavaScript ?

HTML DOM addEventListener() Method

Syntax:

JavaScript preventDefault() Event Method

Syntax:

Example for disabling the Right Click on Web Page

Similar Reads

Thank You!

What kind of Experience do you want to share?