Quick Tip: Preventing Right-Click Context Menu with jQuery

One of my clients recently asked for an image slideshow on his blog to showcase his photography. When I asked him how he wanted it to be, he was insistent on using a Flash slideshow over JavaScript. It turns out that although the Flash gallery was far less useful for him, as he couldn’t view it on the iPhone or iPad, he preferred it anyways because it prevented people from right-clicking on his images and saving them to their hard drives.

I spent a good bit of time attempting to explain to him that while people couldn’t right-click, they could still easily rip the photos using the Print Screen button or using any screen capture tool. My suggestion was to simply watermark the images, however he was insistent on having no context-menus show up on right-click. Ultimately, I ended up using a bit of jQuery to disable all context-menus in any images on the site, which allowed him to use the more compatible JS slideshows:

1
$('img').bind("contextmenu", function(e){ return false; })

That should do the trick! While I still don’t think it’s the best solution, if you run into the need to disable context menus for any element, feel free to use the snippet above (replace the img with anything else).

Edit: Compatibility and Demo

Someone mentioned it doesn’t work in Firefox in the comments – I’ve tested the code in the latest beta build of Chrome, IE8, Firefox 3.6.8, Safari and Opera – it does work in all of these browsers, at least in my Windows 7 x64 build.

Feel free to view the source of the demo to see how the exact implementation. Also, keep in mind that this is certainly not a fool-proof solution (not even a great one) at preventing image theft. It’s useful in deterring the subset of people who are less tech-savvy and are likely to give up after being unable to right-click.

Live Example

Edit 2: I am not suggesting this!

A number of comments make the assumption that I am recommending this technique for preventing image theft. Let me be clear: I am not endorsing this technique for that purpose. There are many ways around it and I made that clear to my client.

Since my client, however, was insistent on specifically disabling right-click for images, the above is the method I used. It was somewhat difficult finding this information online so I decided to share it with others here on my blog. It is certainly not the best solution (not even a good one) for preventing image theft, in my opinion a watermark works much better for that. It may be useful for you in some circumstances, so use the knowledge however you’d like.

Enjoyed the post?

Then you should follow me on Twitter or subscribe to the RSS feed.

  • jim

    You can still drag’n'drop the pic to your desktop.

  • http://www.tarmack.eu Caltic

    Doesn’t do anything in Konqueror (4.5) either. Lets just hope your client doesn’t try it in anything but IE.

    • http://devgrow.com/ Monji

      As stated in the post, it works in “latest beta build of Chrome, IE8, Firefox 3.6.8, Safari and Opera” – how is that implying it only works in IE? It should work in most common browsers just fine.

  • http://WebsitesMadeRight.com Dathan

    Does nothing to prevent iOS image theft. A better solution would be to cover the image with a transparent image and/or use the image in the background URL property. Or you could combine all 3.

  • http://WebsitesMadeRight.com Dathan

    I think a better way to deter theft would be to not block the context menu but instead have a message pop-up on a right click that states something like “saving this image is prohibited by law and is considered piracy…” or some shit.

  • http://sami.bashraheel.org Sami

    Disable JavaScript > Right Click, Save image > Enable JavaScript > Free Pic! Woohoo! Err, Now What?

    • http://devgrow.com/ Monji

      I think you and many others who have commented have missed the entire point of the post – I am not endorsing this technique for preventing image theft. There are many ways around it and I made that clear to my client.

      Since my client, however, was insistent on disable right-click for images, the above is the method I used. It was somewhat difficult finding this information online so I decided to share it with others here on my blog. It is certainly not the best solution (not even a good one) for preventing image theft, in my opinion a watermark works much better for that.

      • http://WebsitesMadeRight.com Dathan

        The snippet is useful but what would be more useful is a comparison of this and alternatives to show why this a bad technique… what you’ve done is equip us with a technique that shouldn’t be done. As for watermarking, that does ruin the artist’s work.

  • http://www.josegaldamez.com Jose Galdamez

    One of the more clever theft-prevention techniques I’ve seen has been on the social network Badoo. I dug around their code to see how they pulled it off, and it seems to me that instead of disabling right clicking they throw an equally sized DIV on top of the IMG tag.

    The DIV completely overlays the IMG within the browser window since the DIV has a higher z-index. The result is that the user cannot drag the image neither can they do a Save As. The only way around this is to use a plug-in like Firebug or the Web developer tools that come with Safari and IE. These allow you to see all the files that were downloaded via HTTP and eventually pick out the image you want.

    I’ve seen a few other techniques that incorporate Flash. For example, this one site that sells graduation ceremony photos allows you to see a watermarked, low quality version of your photo before buying. Right clicking gets you the Adobe Flash context menu, but if you look at the markup you can see that all they’re doing is populating the Flash slideshow with images via URL parameters. I eventually got to the image’s URL, only to find the same low quality, watermarked image in JPEG format. That’s where I gave up.

    I guess the moral is there is no fool proof way to keep image “crooks” out, but as long as the client is happy with disabling right click then whatever gets you paid works!

    • http://brettalton.com/ Brett Alton

      You don’t need a plugin in Firefox, you can simply use “View Page Info” > “Media” tab and there you go, you have all the images and video that have been downloaded.

      So yes, a watermark is always best.

  • http://www.RushhourNews.com RushHourNews.com

    In terms of protecting the photo, still the best approach would be watermark, but it takes little bit of time to use it

  • Bobby

    Failing in Firefox 9.

  • Ghgh

    hygfhjjhgj