How to Disable Right Click on Images Using jQuery

In one of my previous posts, we already discussed how to Disable CTRL+U, CTRL+C, and Right Click on a Web page, and today’s tutorial is all about how to disable right-clicking and to drag on images using jQuery on any webpage.

I often get requests from my blogger friends and clients to secure the photos on their sites and prevent people from downloading or saving them. Most of them want me to update the site to avoid users’ right-click on the image and save image or drag image to their Computer or application like Photoshop.

Okay, but why should you disable right-click and drag on pictures in your blog or website?

There is no particular reason for you to do this. Personally, I do not recommend using this script to disable right-click images because it decreases the user experience quality. Moreover, it would be highly annoying to many users. Remember that your website’s main purpose is to provide value to your users.

Even if you are familiar with a little bit of jQuery and CSS selectors, you can edit the script to disable or enable right-click and drag on any kind of HTML element. You can disable right click on images with a special class of a particular component.

How to add the script?

If you want to add this script to your blog, then here is a script you can use to disable right click on drag on images. This script is works based on jQuery, but the condition is that your blog must have a jQuery plugin installed. If not, add the below jQuery plugin above the </head> tag in your blog or website.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Now, It’s time to add the jQuery script that will disable right-clicking and dragging on images on your blog website. All you have to do is add the below script above the </body> tag in your blog/website’s HTML.

<script type="text/javascript">
$(document).ready(function(){
// this part disables the right click
$('img').on('contextmenu', function(e) {
return false;
});
//this part disables dragging of image
$('img').on('dragstart', function(e) {
return false;
});

});
</script>

That’s it. Now visit your website and try to right-click on any image and see how this script works!

Is there another way to do it?

Additionally, Here is another way that you can use to disable right click on the image using Javascript (Yes, Javascript. Not jQuery). If you don’t want to add the above jQuery script to your blog or want only right clicking to be disabled and not dragging, there’s another way.

However, you can remove the drag disabling function from the above script too, but you can simply use the below Javascript code below that you have to paste before </head> tag in your blog or website’s HTML.

<script type='text/javascript'>
//<![CDATA[
function nocontext(e) {
var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
if (clickedTag == "IMG") {
return false;
}
}
document.oncontextmenu = nocontext;
//]]>
</script>

How to add the script?

Is there another way to do it?

About Nitin Maheta