Question

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

我只知道这个：

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

Answer 1

这有效：

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

或者对于较新的jQuery：

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

jsFiddle example

Answer 2

您禁用右键单击的目的是什么？任何技术的问题在于总有办法绕过它们。 firefox（firebug）和chrome的控制台允许解除该事件的绑定。或者如果您希望图像受到保护，可以随时查看图像的临时缓存。

如果您想创建自己的上下文菜单，则preventDefault很好。在这里挑选你的战斗。甚至像tnyMCE这样的大型JavaScript库也不适用于所有浏览器...这不是因为它不可能; - ）。

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

就个人而言，我更喜欢开放的互联网。页面交互不应妨碍本机浏览器行为。我确信可以找到其他方式进行交互，而不是右键单击。

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>

Answer 4

在chrome和firefox中，除非我使用'live'而不是'bind'，否则上述方法不起作用。

这对我有用：

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

Answer 5

如果在图像上放置单独的水印，是否可以保留右键单击和下载的功能。当然这不会阻止屏幕截图，但认为它可能是一个很好的中间地带。

Answer 6

你可以试试这个：

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

Checkout a demo here

Answer 7

一种非常简单的方法是将图像作为背景添加到DIV，然后将空的透明gif集加载到与前景中的DIV相同的大小。保持较少的决心。他们无法在不查看代码的情况下获取背景并复制URL并右键单击下载透明gif。

Answer 8

没有jQuery的更好方法：

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

Answer 9

这应该有效

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

Answer 10

对于现代浏览器，您只需要这个 CSS：

img {
    pointer-events: none;
}

较旧的浏览器仍然允许图像上的指针事件，但上面的 CSS 将处理您网站的绝大多数访问者，并且与 contextmenu 方法结合使用应该会给您一个非常可靠的解决方案.

使用jquery禁用右键单击图像

10 个答案: