How to Disable Right Click on a Webpage in JavaScript

Tahseen Tauseef Feb 02, 2024

JavaScript JavaScript Webpage

Use the HTML DOM addEventListener() Method to Disable Right Click on a Webpage in JavaScript
Use the preventDefault() Method With contextmenu Event to Disable Right Click on a Webpage in JavaScript

How to Disable Right Click on a Webpage in JavaScript

While creating a blog, website, or webpage, we sometimes need to disable the right-click button.

This article will discuss some of the most common and beneficial methods that we can use to disable right-click. This may not completely protect our data, but it will provide security to some extent.

To disable the right-click on a page, we can use JavaScript’s HTML DOM addEventLIstener() and preventDefault() method.

Use the HTML DOM `addEventListener()` Method to Disable Right Click on a Webpage in JavaScript

An event handler is attached to a document using the addEventListener() method.

Syntax:

document.addEventListener(event, function, useCapture)

Parameters:

event: (Required) It specifies the string, which is the event’s name.
function: (Required) When the event occurs, it indicates the function to run. An event object is supplied to the function as the first parameter when the event happens.

The defined event determines the event object’s type. The MouseEvent object, for example, represents the click event.
useCapture: (Optional) It specifies the boolean value of whether it should execute the event in the capturing or the bubbling phase.
true: It specifies that the event should execute in the capturing phase.
false: It instructs the event to run during the bubbling phase.

Use the `preventDefault()` Method With `contextmenu` Event to Disable Right Click on a Webpage in JavaScript

This function cancels the event if it can be canceled, which disables the event’s default action. For instance, clicking the “Submit” button will prevent submitting the form.

Syntax:

event.preventDefault()

It does not accept any parameter.

This example will disable the right-click by adding an event listener for the contextmenu event and calling the preventDefault() method.

What this code does is that it prevents the right-click menu from popping up. Whenever a right-click event occurs the preventDefault() function disables the right-click.

Due to the contextmenu event (which is the default functionality when a right-click occurs) being disabled by using the preventDefault() function.

This code also displays a message saying Right Click Disabled when we right-click.

<html>
    <head>
        <title>
            Disable right click on my web page
        </title>
    </head>

    <body style = "text-align:center;">

        <h1 style = "color:blue;" >
            BLOCTAKSolutions
        </h1>

        <p id = "GFG_UP" style = "font-size: 20px; font-weight: italic;">
        </p>

        <button onclick = "gfg_Run()">
            Disable
        </button>

        <p id = "GFG_DOWN" style =
            "color:blue; font-size: 50px; font-weight: italic;">
        </p>

        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            el_up.innerHTML = " How to disable right click";

            function gfg_Run() {
                document.addEventListener('contextmenu',
                        event => event.preventDefault());
                el_down.innerHTML = "Right Click is disabled";
            }
        </script>
    </body>
</html>

Output before clicking the Disable button:

Output Before Clicking Disable Using preventDefault()

Output after clicking the Disable button:

Output After Clicking Disable Using preventDefault()

Another example of this program is to add an event listener for the contextmenu event and use the preventDefault() method to deactivate the right-click on the image because we don’t always want the user to save an image.

<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:blue;" >
            BLOCTAKSolutions
        </h1>

        <img src = ""/>

        <p id = "GFG_UP" style = "font-size: 20px; font-weight: italic;">
        </p>
        <button onclick = "gfg_Run()">
            Disable
        </button>
        <p id = "GFG_DOWN" style =
            "color: blue; font-size: 50px; font-weight: italic;">
        </p>

        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            el_up.innerHTML =
                "How to disable right click on image by button click using JavaScript";

            function gfg_Run() {
                document.addEventListener("contextmenu",

                function(e) {
                    if (e.target.nodeName === "IMG") {
                        e.preventDefault();
                    }
                }, false);

                el_down.innerHTML = "Right click is disabled on the image";
            }
        </script>
    </body>
</html>

Output before clicking the Disable button:

Output Before Clicking Disable Using addEventListener() and preventDefault()

Output after clicking the Disable button:

Output After Clicking Disable Using addEventListener() and preventDefault()

Use the HTML DOM addEventListener() Method to Disable Right Click on a Webpage in JavaScript

Use the preventDefault() Method With contextmenu Event to Disable Right Click on a Webpage in JavaScript

Use the HTML DOM `addEventListener()` Method to Disable Right Click on a Webpage in JavaScript

Use the `preventDefault()` Method With `contextmenu` Event to Disable Right Click on a Webpage in JavaScript