We are going to learn how to disable right click on a website using three different methods: The Native HTML way, JavaScript, and jQuery. Disabling right click can be useful in protecting your website's content and images from being copied or downloaded without permission. Our tutorial provides step-by-step instructions for each method, so you can choose the one that best suits your needs.
Using Native HTML method
You have to add the following code in your body tag. It is the most effective way of disabling right click because it works even If JavaScript is disabled.
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
Using JavaScript method
If you want to use this method, make sure you are using noscript tag in your Website otherwise It won't work If JavaScript is disabled in Client's Browser. Add the below given code between your Site's head tag.
<script>
document.addEventListener('contextmenu', event => event.preventDefault());
</script>
You might like this: How to Hide Content If JavaScript is Disabled
Using jQuery method
If you are already using jQuery then this method is better than JavaScript. I don't recommend to use jQuery only for disabling Right Click. You still have to use noscript otherwise It is ineffective If JavaScript is disabled.
Add this jQuery CDN between head tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
Add this Script either in your external JS file or directly using script tag:
$(function() {
$(this).bind("contextmenu",
function(e) {
e.preventDefault();
});
});
You can check the effect from clicking here.
You have successfully learned using Disabling Right click by Three ways. If you have any doubt. Leave the comments below. Thank you!