How to Disable Right Click on Website (3 Ways)

In this tutorial, we’re going to see how to disable right-click on a website in 3 different ways. Also, we will discuss the benefits of using this tactic and the most common drawbacks. So, let’s begin.

Disable Right Click on the Website

The following are the three useful ways that you can use.

1. Use JavaScript to Disable Right Click on Website

JavaScript is the most effective way to disable right click on a web page. For this, we will use the preventDefault() method with addEventListener() and context menu. Let’s see how.

The below JavaScript code will disable right-clicking on the website. You can copy and paste the below code inside the <head> tags of your site source code or before the </body> closing tag. You can also check out this tutorial about 3 Easy Methods to add JavaScript in HTML.

<!-- JavaScript Code -->
<script>
    document.addEventListener("contextmenu", function(e){
            e.preventDefault();
        }, false);
</script>

Code Explanation:

  • addEventListener() is a JavaScript method that has 3 parameters event, function, and useCapture. This JavaScript method allows us to specify the event that we want to listen for such as a right click and the function that will be called when the event will occur.
  • I used the JavaScript preventDefault() method that will execute after the function call and disable the context menu from appearing. The preventDefault() method accepts no parameter.
  • For the third parameter which is useCapture, I used false which is the default value and it’s optional. The false parameter means the event handler is called during the bubbling phase.

You can see the above code output in the image below which clearly demonstrates how JavaScript code works to disable right click.

disable right click on website

2. Disable Right Click on the Website using CSS

CSS is another useful way that you can use to disable right click on your website. For this purpose, we use CSS user-select property. The below CSS code demonstrates how to use this:

<style>
body{
    user-select: none;
}
</style>

The CSS code above also disables the left click which prevents users from highlighting text on your site.

3. Use Plugins to Disable Right Click

If you’re using WordPress CMS then using a plugin is the better and safest option you have to disable right-click on the website. For this, you can use the following plugins:

Furthermore, these plugins also provide some other features like disabling image drag n drop, disabling shortcuts to view source code, and more.

Conclusion

This tutorial showed you three different ways to disable right click on the website. If one method doesn’t work for you try another one. However, disabling the right-click on a website can cause a bad experience for your users. Because it prevents site users from opening links in new tabs and copying something. Also, it is not a better way to prevent content theft. To avoid content theft, you showed try DMCA.com.

Shortly, DMCA is an online service that provides copyright protection tools to help copyright owners so that they can protect their online content from theft.

Finally, if you have any questions then feel free to ask in the comments section below.

Also, don’t forget to help others by sharing this tutorial!