使用jQuery禁用图像的右键单击功能

Question

我想知道如何使用jQuery禁用图像的右键单击。

我只知道这个：

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

- Bat_Programmer

---

这应该有效一段时间；）。但是算了吧，有100种其他方法可以从网上保存图片。顺便说一下，如果你正在传递点击的对象，那就用它吧！http://jsfiddle.net/VZX4A/ - meo

我知道。我这么做只是为了减少图像副本的数量，特别是针对那些只会右键保存的愚蠢用户。 - Bat_Programmer

别这样做。你并不能防止图片被复制，而且会禁用浏览器的默认和预期功能。 - Joe Jordan

我正在将一个网页浏览器嵌入到Access数据库中。这个浏览器包含一个动态地图。当你在地图上右键单击时，会出现“另存为图片”的选项。如果你像那样保存一张图片，它只会保存地图的一个瓷砖。这将让我发给这个数据库的技术不太好的人感到困惑，我需要解释。其实我根本没有必要让那个菜单出现。我同意，在网站上禁用鼠标右键是一件坏事，但这并不意味着你永远不应该这样做。 - Mr_Chimp

可能是重复的问题：如何在我的网页上禁用右键单击？（https://dev59.com/8nRB5IYBdhLWcg3wCjnO） - Cole Tobin

尝试使用这个插件 https://github.com/thatisuday/copynote - Uday Hiwarale

Answer 1

这个可行：

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

或者对于更新的jQuery：

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

jsFiddle示例

- Jacob Relkin

---

新的方法是：$('body').on('contextmenu', 'img', function(e){ return false; }); 不过如果可以的话，我建议使用比 'body' 更精确的选择器。 - Myster

jQuery再次搭配一二Knockout。 <3 - Foxinni

嗨，Jacob，你能告诉我各个浏览器支持这个jQuery特性的最低版本是什么吗？ - SexyBeast

谢谢您的回复，但是当用户按下“Shift”+右键时，上下文菜单会显示出来。 - Sara N

Answer 2

禁用右键的目的是什么？任何技术都有被绕过的方法。Firefox（Firebug）和Chrome的控制台允许解除该事件的绑定。或者如果您想要保护图片，您还可以查看它们在临时缓存中的映像。

如果您想创建自己的上下文菜单，则preventDefault很好用。只需谨慎选择战场。即使像tnyMCE这样的大型JavaScript库也无法在所有浏览器上工作......而这并不是因为不可能 ;-)

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

个人而言，我更支持开放的互联网。页面交互不应妨碍本地浏览器行为。我相信可以找到其他与右键点击不同的交互方式。

- yopefonic

---

更改以更好地适合澄清。 - yopefonic

Answer 3

禁用右键选项

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

- Prince Antony G

---

纯JavaScript版本很好，但是提问者要求使用jQuery。 - Trae Abell

Answer 4

在Chrome和Firefox中，如果我使用'bind'方法，上述方法不起作用，除非我改为使用'live'。

以下内容对我有效：

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

- Emz

Answer 5

现代浏览器只需要以下CSS即可：

img {
    pointer-events: none;
}

旧版浏览器仍然允许在图像上进行指针事件，但是上面的CSS将照顾到您网站的绝大部分访问者，并且与contextmenu方法一起使用应该会为您提供非常可靠的解决方案。

- Gavin

Answer 6

没有使用jQuery更好的方法：

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

- Amir Hassan Azimi

Answer 7

当一个单独的水印被放置在图片上时，是否可以仍然保留右键点击并下载的功能。当然这并不能防止截屏，但认为这可能是一个好的折衷方案。

- EZDC

Answer 8

你可以尝试这个：

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")

在此处查看演示

- Serkan

Answer 9

一种非常简单的方法是将图像添加为DIV的背景，然后加载一个大小与DIV相同的空透明gif作为前景。这可以防止那些不那么决定的人进入。他们无法在查看代码并复制URL之前获取背景，右键点击只会下载透明gif。

- Chris

Answer 10

这应该可以工作

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

- Mohamad Hamouday