Disabling right click on images using jquery

Question

I want to know how to disable right click on images using jQuery.

I only know this:

<script type="text/javascript" language="javascript"> $(document).ready(function() { $(document).bind("contextmenu",function(e) { return false; }); }); </script> 

Answer 1

It works:

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

Or for the newer jQuery:

 $('#nearestStaticContainer').on('contextmenu', 'img', function(e){ return false; }); 

JsFiddle example

Answer 2

What is your goal of disabling the right click. The problem with any technique is that there is always a way around them. console for firefox (firebug) and chrome can cancel this event. or if you want the image to be protected, you can always just look at their temporary cache for images.

If you want to create your own context menu, the preventDefault function is great. Just select your battles here. even a large JavaScript library such as tnyMCE works in all browsers ... and this is not because it is not possible; -).

 $(document).bind("contextmenu",function(e){ e.preventDefault() }); 

Personally, I go more into the open Internet. Native browser behavior should not interfere with page interaction. I am sure that you can find other ways of interaction that are not a right click.

Answer 3

Disable right-click option

 <script type="text/javascript"> var message="Function Disabled!"; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") </script> 

Answer 4

In chrome and firefox, the methods described above do not work unless I used "live" instead of "bind".

This worked for me:

 $('img').live('contextmenu', function(e){ return false; }); 

Answer 5

Is it possible to leave the opportunity to right-click and load as soon as a separate watermark is made on the image. Of course, this will not interfere with screen shots, but I thought that this could be a good environment.

Answer 6

You can try the following:

 var message="Sorry, right-click has been disabled"; function clickIE() { if (document.all) { (message); return false; } } function clickNS(e) { if (document.layers || (document.getElementById && !document.all)) { if (e.which == 2||e.which == 3) { (message); return false; } } } if (document.layers) { document.captureEvents(Event.MOUSEDOWN); document.onmousedown = clickNS; } else { document.onmouseup = clickNS; document.oncontextmenu = clickIE; } document.oncontextmenu = new Function("return false") 

Check out the demo here.

Answer 7

A very simple way is to add the image as a background to the DIV, and then load an empty transparent gif set to the same size as the DIV in the foreground. which remains less decisive. They cannot get the background without looking at the code and copying the URL, and right-clicking just loads the transparent gif.

Answer 8

The best way to do this without jQuery:

 const images = document.getElementsByTagName('img'); for (let i = 0; i < images.length; i++) { images[i].addEventListener('contextmenu', event => event.preventDefault()); } 

Answer 9

This should work

 $(function(){ $('body').on('contextmenu', 'img', function(e){ return false; }); });