How to Disable right click on a webpage using JavaScript

7 mins0
How to Disable right click on a webpage using JavaScript - Codewolfy

Are you seeking to gain better control over your website in terms of content and user interactions? One of the conventional needs of a web developer is knowing how to disable right click using JavaScript. This prevents the browser from popping up the default context menu, which gives you better control over how users will interact with your page, especially in protecting images or text.

The primary purpose of disabling the right-click is to protect one’s content. For example, photographers and artists who sell their works online consider this a possible way to discourage visitors from downloading their work onto their computers. This will also enhance user experience for web applications where the context menu is either irrelevant or distracting, helping the user navigate through a certain workflow without interruption.

Prevent the Right-Click Context Menu for the Entire Page

The most straightforward way to disable right-click across your entire webpage is by listening for the contextmenu event. It fires whenever a user attempts to open a context menu, which is typically done by right-clicking the mouse. By capturing this event, you can prevent browser’s default behavior with few lines of JavaScript Code. Let’s see an example for it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disable Right Click Example</title>
</head>
<body>

    <h1>My Webpage</h1>
    <p>Try to right-click anywhere on this page. The context menu will not appear.</p>
    <img src="image.jpg" alt="An example image">

    <script>
        document.addEventListener('contextmenu', event => event.preventDefault());
    </script>

</body>
</html>

With contextmenu event listener, it will block right click event or context menu opening for entire document.

Block Right Click on Specific Elements

Sometimes, you need to block user for performing action on single element or section of web page instead of full page. For this type of cases you can this event only for specific element like below example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disable Right Click on an Element</title>
</head>
<body>

    <h1>Protecting a Specific Image</h1>
    <p>You can right-click on this text, and the menu will appear.</p>

    <img id="protected-image" src="image.jpg" alt="A protected image">
    <p><em>Try right-clicking the image above. Nothing will happen.</em></p>

    <script>
        const protectedImage = document.getElementById('protected-image');
        
        protectedImage.addEventListener('contextmenu', (event) => {
            event.preventDefault();
        });
    </script>

</body>
</html>

In this example, we have element with “protected-image” ID and with adding event listener for that specific element you can disable right click for specific section.

Using an Inline HTML Attribute

This is an older, more direct method where you add an event handler directly into the HTML tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Disable Right Click</title>
</head>
<body oncontextmenu="return false;">

    <h1>Inline Right Click Prevention</h1>
    <p>Right-clicking is disabled for the entire page using an attribute in the body tag.</p>

</body>
</html>

Here, oncontextmenu="return false;" attribute is added directly to the tag. When a right-click event occurs on the page, this inline code executes and return false. It prevents the default menu and stops the event from propagating further.

Conclusion

You can easily disable right click using JavaScript to protect your website content and guide user interactions. You can apply the contextmenu event with event.preventDefault() to the whole page or specific elements. It’s a modern and efficient way to disable right-click actions. However, this method only discourages casual content theft, as determined users can still find other ways to access your content.

To further protect your written content, you can also prevent keyboard shortcuts for copying. Learn exactly how to do this in our guide on how to Disable Copy and Paste using jQuery.