October 6, 2021

How to Disable Right Click on Website using Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to disable right click on website using javascript. Whenever a user wants to download an image from a website or copy some of the text content, then he has to press the right button on the mouse to see the context menu and choose the appropriate option to act.

Depending upon the kind of website you are developing, you can allow this behavior or restrict it completely. Downloading and using copyrighted images and text content is pretty common these days and obviously, it is illegal.

To stop such plagiarism, we as web developers have to make certain preventive measures, and disabling right click functionality is one of them so that no one should be able to steal the content posted on the website.

Whenever a user presses the right button on the mouse, a contextmenu event is fired. We can leverage this event to stop the context menu from appearing completely.

In the following example, we have a div element and an img element. We are going to disable right click on these elements as well as on the entire document. Please have a look over the code example and the steps given below.

HTML & CSS

We have a div element and an img element in the HTML file.
The innerText for the div element is “Hello World”.
We are using background.jpg as a source of the img element. You can use any image of your choice.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div>Hello World</div>
    <img src="background.jpg" alt="">
    <script src="script.js"></script>
</body>
</html>

div {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid black;
    height: 100px;
}

Javascript

We have created a function disableRightClick() and this function will act as our event handler function for contextmenu event.
The event object contains preventDefault() method. As the name suggests, it prevents the default behavior of the event. In our case, the default behavior is to display a context menu on right click.

Disabling Right Click on DIV Element

We have selected the div element using the document.querySelector() method and attached contextmenu event listener to it.
The disableRightClick() function is our event handler function and it will stop the context menu from appearing on the div element.

Disabling Right Click on Image Element

We have selected the img element using the document.querySelector() method and attached contextmenu event listener to it.
The disableRightClick() function is our event handler function and it will stop the context menu from appearing on the img element.

Disabling Right Click on Web Page

We have attached the contextmenu event listener to the document object.
The disableRightClick() function is our event handler function and it will stop the context menu from appearing on the web page. It does not matter where you do the right click. The context menu will not appear since we have disabled it on the document level.

document.querySelector('div').addEventListener('contextmenu',disableRightClick);
document.querySelector('img').addEventListener('contextmenu', disableRightClick);
document.addEventListener('contextmenu', disableRightClick);

function disableRightClick(e) {
    e.preventDefault();
}

You May Also Like: