使用jquery禁用右键单击图像

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

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

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

img {
    pointer-events: none;
}

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