1

I know disabling right-click on images won't stop technical-minded people from downloading images. Using them as CSS backgrounds is not an option.

Ideally, I'd like to ONLY remove image-saving options and not the whole context menu. I have found 3 solutions. What do people recommend and why? Is there any specific part of the include file in which I should put this?

Many thanks :)

#1

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

#2

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

121 upvotes, src: Disabling right click on images using jquery

#3 

$(document).ready(function() {
    $("img").on("contextmenu", function() {
       return false;
    }); 
});

76 upvotes, src: How to prevent Right Click option using jquery

Community
  • 1
  • 1
  • just put image in `background` css property – ixpl0 Dec 05 '16 at 09:01
  • 3
    @iXplo Read the question carefully. She said "Using them as CSS backgrounds is not an option." – besciualex Dec 05 '16 at 09:02
  • 4
    They all literally do the exact same thing in the end with different trigger points. I don't think there is any difference at all. – josephting Dec 05 '16 at 09:02
  • 1
    The only difference is that #2 is using `bind()` which is deprecated. So your choice is to use #1 when the `img` are dynamically loaded, otherwise #3 – Rory McCrossan Dec 05 '16 at 09:04
  • 1
    As joseph said, all the code above does the same thing. If you really want to prevent downloading or unwanted image downloads, try watermarking the pictures. – besciualex Dec 05 '16 at 09:04
  • 1
    messing with default context-menu is not possible. What you can do is create your own custom menu. Take a look [here](http://stackoverflow.com/questions/4909167/how-to-add-a-custom-right-click-menu-to-a-webpage) – Anupam Dec 05 '16 at 09:08
  • 1
    The comment by josephting is misleading. They are different, as described by Alexandru Severin's answer. – Rhys Bradbury Dec 05 '16 at 10:21
  • Thank you guys! :) Got it working beautifully, to find that drag disable isn't supportedby jQuery lol –  Dec 07 '16 at 09:30

1 Answers1

1

(2) uses a deprecated method: bind, so I won't recommend it.

(1) and (3) will do the same thing, the only difference is that in (3) the listener is added after the page is fully loaded.

There is no way to disable particular menu items from the default context menu. You may however write your own context menu for "img" elements which doesn't include save options, but I suspect for your purpose its not worth the trouble.

Alexandru Severin
  • 6,021
  • 11
  • 48
  • 71
  • To add to this answer, (1) will also 'bind' to dynamically loaded img's on the page. I would recommend using (1), and wrapping it in a `$(document).ready()` block. – Rhys Bradbury Dec 05 '16 at 10:19
  • @RhysBradbury (3) will also be usable with dynamically added content, as event handlers attached using the `on()` function will work for both current and future elements. See http://stackoverflow.com/questions/10082031/why-use-jquery-on-instead-of-click – Alexandru Severin Dec 05 '16 at 10:44
  • Oops I missed that! – Rhys Bradbury Dec 05 '16 at 23:47