logo标签列表

如何使用jquery禁用右键点击选项

jquery
46

如何在网页中禁用图片的右键点击功能？

8
通常当人们质疑我的动机而不是直接回答该死的问题时，我会感到恼火。但是你真的想劫持用户的右键单击吗？如果他们想要获取你的图片，他们总会有办法……使用Firebug或者查看源代码就足以得到你任何图片的直链。 - Daniel Sloof
2
可能值得提到为什么你要尝试禁用右键点击。如果你认为这样可以保护你的图片，再想想吧——你只是在阻止那些对计算机不熟悉的人（虽然这也有其价值）。 - Wesley Murch
2
...或者是非常不正统且非常复杂的“打印屏幕” :) - Wesley Murch
3
如果保护图像是原因，真正的解决方案是使用水印。这是否又是另一个 X Y 问题？ - happy
5
我希望人们能够摆脱一些高傲的想法，因为有很多原因想要这么做，不仅仅是为了阻止人们下载图片。如果发帖者想这么做，那么根据问答精神，如果你知道如何回答问题就回答。如果发帖者在回答后说“这样用户就无法下载该图片”，请继续告诉他们这并不是一个完整的解决方案。 - Morvael
显示剩余4条评论
15个回答
138
4
我坦率地不喜欢阻止右键点击图片的想法。 - Peeter
3
非常感谢，功能完美。我正在全屏浏览器的展示台模式下使用它，我认为这是禁用上下文菜单的正当理由。 - nspace
@willdanceforfun - 你的小提琴有问题。还不能在白色背景上使用白色图像 :P 更新的 JSFiddle。而且，.bind()已经被弃用了，请改用.on()。 - Richard de Wit
因为宣传网页劫持和违反标准的行为而被踩。 - Martin Spamer
3
有人解释了他们为什么需要这个功能。“我正在使用全屏浏览器的展示模式，我认为这是禁用上下文菜单的合理理由”... 这并不是在推广它，只是在回答一个问题。（尽管我同意禁用右键点击并不明智） - ʰᵈˑ
显示剩余6条评论
17

我认为这会有所帮助。关键是绑定上下文菜单事件。

<script type="text/javascript" language="javascript">
        $(function() {
            $(this).bind("contextmenu", function(e) {
                e.preventDefault();
            });
        }); 
</script>
$(this) 是我正在寻找的，谢谢！另外，.bind() 已经被弃用了，请使用 .on() 代替。 - Richard de Wit
谢谢。$(this) 这个解决了我的问题。非常好的答案！ - Sannu
8

<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" >

在所选标签中设置这些属性。

查看工作示例- https://codepen.io/Developer_Amit/pen/drYMMv

无需JQuery（类似）。

6
$(document).ready(function() {

    $(document)[0].oncontextmenu = function() { return false; }

    $(document).mousedown(function(e) {
        if( e.button == 2 ) {
            alert('Sorry, this functionality is disabled!');
            return false;
        } else {
            return true;
        }
    });
});

如果您只想在单击图像时禁用它，请改为使用$("#yourimage").mousedown而不是$(document).mousedown

谢谢Anu，就像我之前说的那样...这会阻止整个页面的右键点击，我只需要针对图片... - mymotherland
4
以下代码将禁用整个页面的鼠标右键点击。
$(document).ready(function () {
   $("body").on("contextmenu",function(e){
     return false;
   });
});

完整的教程和工作演示可以在此处找到 - 使用jQuery禁用鼠标右键

4

试试这个：

$(document).bind("contextmenu",function(e){
    return false;
});
1

我在这里找到了一些有用的链接，带有实时工作示例。

我已经尝试过，它的工作很好。

如何使用jQuery防止右键单击选项

$(document).bind("contextmenu", function (e) {
        e.preventDefault();
        alert("Right Click is Disabled");
    });
对我来说，在IE浏览器上悬停在图片上时，onmousedown事件没有被触发 - 我发现唯一让警告框出现的方法是通过这个事件。 - chris.fy
谢谢。您可以在以下链接中找到一些类似的文章。http://www.thedevelopertips.com - Barath Kumar
1
方法1:
<script type="text/javascript" language="javascript">
        $(document).ready(function(){

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

            return false;

            });

    });

</script>

方法二：
<script type="text/javascript" language="javascript">
        $(document).ready(function(){

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

            e.preventDefault();

            });

    });

</script>
1

这是一个工作示例，红色链接现在无法右键单击。

$("ul.someLinks1 a").each(function(i, obj) {

  $(obj).on("contextmenu",function(){
     return false;
  }); 
  
  $(obj).css("color", "red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="someLinks1">
  <li><a href="www.google.de">google</a></li>
  <li><a href="www.stackoverflow.de">stackoverflow</a></li>
  <li><a href="www.test.de">test</a></li>
</ul>

<ul class="someLinks2">
  <li><a href="www.foobar.de">foobar</a></li>
  <li><a href="www.foo.de">foo</a></li>
  <li><a href="www.bar.de">bar</a></li>
</ul>

0

试试这个！！

$('#element').mousedown(function(event) {
    switch (event.which) {
        case 3:
           $("img").on("contextmenu",function(){
       return false;
    }); 
            break;
    }
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接