jquery - 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...

Answer 1

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

Answer 2

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.

Answer 3

在您的点击事件中，试试这个，

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

这看起来像一个类似的。 jQuery如何区分鼠标左键单击和右键单击

Answer 4

您可以通过使用contextmenu事件禁用上下文菜单：

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

无论如何，这不会阻止用户在页面上保存图像。他们仍然可以通过 dom 看到图像 URL 并直接获取它们，或者从浏览器缓存中获取它们。