hide images on right click with jquery

Question

I want to hide the images in a photographic gallery when somebody uses the right-click trying to download them. Hide an object with jquery is really easy when the user press the normal left click, just adding a simple event

$("document").ready(function(){
    $("img").click(function(event){
       $(this).hide("fast");
    });
});

But how can I detect the right-click of the mouse to activate the event.preventDefault(); and set a $(this).hide action to the images...

This has been asked before - http://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery. And you are aware that users can disable JS, right? — Terry, Apr 30 '13 at 21:33
@Terry Not even needed to disable JS, you can do all the following: go Tools > View Source, Ctrl+U, F12 for Firebug/DevTools, etc etc. `contextmenu` is just a fool's barrier :) — RaphaelDDL, Apr 30 '13 at 21:40

score 2 · Answer 1 · answered Apr 30 '13 at 21:33

2

$("document").ready(function(){
    $("img").click(function(event){
        if(event.which === 3) {
            $(this).hide("fast");
        }
    });
});

answered Apr 30 '13 at 21:33

This doesn't seem to work in Chrome or Firefox. http://jsbin.com/emotax/2/edit – CraigTeegarden Apr 30 '13 at 21:37
@c4p - no it does'nt! – adeneo Apr 30 '13 at 21:38

adeneo · Answer 2 · 2013-04-30T21:38:04.143

The contextmenu event is triggered on right click, so the usual shortcut is to use that event :

$(document).ready(function(){
    $("img").on('contextmenu', function(event){
       $(this).hide("fast");
    });
});

The other way would be to use the mousedown event, and check what button was used :

$("img").on('mousedown', function(event){
    if (event.which === 3)
        $(this).hide("fast");
});

In my browser (chrome) the latter solution does not work with a click event, only the mousedown event.

score 0 · Answer 3 · edited May 23 '17 at 11:57

0

In your click event, try this,

if (event.which === 3) e.preventDefault();

This looks like a similar one. How to distinguish between left and right mouse click with jQuery

edited May 23 '17 at 11:57

Community

1
1

answered Apr 30 '13 at 21:35

Jimmy Smith

2,452
1
16
19

score 0 · Answer 4 · answered Apr 30 '13 at 21:41

you can disable context menu by use contextmenu event:

$(document).on("contextmenu","img", function(e){
   //hide image ,show alert , etc..
   return false;
});

anyway, this will not prevent users from being able to save the images on the page.they still able to see the image URL through dom and get them directly,or from the browser cache.

hide images on right click with jquery

4 Answers4