如何禁用我的网页上的右键单击？

315

是否可以在不使用JavaScript的情况下禁用网页上的右键单击？我问这个问题是因为大多数浏览器都允许用户禁用JavaScript。

如果没有，如何使用JavaScript禁用右键单击？

javascript 
— 维奈·潘迪（Vinay Pandey）
source
130
禁用右键单击并不安全，只会惹恼您的用户。任何不允许您禁用此功能的浏览器都是毫无价值的，但是首先这样做的网站却很糟糕。
— 丹·奥尔森，2009年
17
如果您不希望获取内容，则不应将其发布到网络上。:)现代浏览器甚至可以超越JavaScript禁用右键单击的功能。诸如Firebug / Web Dev Toolbar之类的工具使保护变得无用。
— epascarello
7
：这里是一个小镀铬/ greesemonkey用户脚本来重新启用右键dl.dropbox.com/u/464119/Programming/javascript/...
— ripper234
31
真的@DanOlson ...如果要编写自己的右键菜单，应该怎么办？如在cPanel中找到的。
— Codesmith 2013年
30
@epascarello在某些情况下，禁用右键单击是必不可少的，例如在自助服务终端上，bceause用户实际上并不需要它，而将其留在那里实际上会使用户烦恼
— Aram

Answers:

524

您可以使用JavaScript通过为“ contextmenu”事件添加事件侦听器并调用preventDefault()方法来做到这一点：

document.addEventListener('contextmenu', event => event.preventDefault());

话虽这么说：不要做。

为什么？因为它除了使用户烦恼之外什么也没有。同样，许多浏览器都有一个安全选项，无论如何都不允许禁用右键单击（上下文）菜单。

不知道为什么要这么做。如果出于某种误以为您可以用这种方式保护源代码或图像的想法，请再考虑一遍：您不能。

— 克莱图斯
source
86
使用oncontextmenu="return false"上比身体其他的东西可能是有意义的，例如在画布上。
— AdrienBrault
62
我们正在部署到信息亭机上，并选择了这种方式来禁止用户刷新页面。
— Todd Horst
21
在这种情况下，@ ToddHorst我将使用没有任何用户界面的特殊“浏览器”版本的浏览器，通常也可以在没有任何上下文菜单的情况下使用它：)
— mihi
17
启用触摸的系统有时会将某些触摸事件（例如长按）映射到右键单击（从而打开上下文菜单）。但是，此行为可能是不希望的，防止该行为的唯一有意义的方法似乎是完全禁用上下文菜单。
— OR Mapper 2014年
58
旧线程，但万一有人阅读它，并非所有的Web开发人员都会自己创建自己的网站，有时客户会来找您，并坚持禁用右键单击，当您试图说服他时，他只会寻找其他愿意这样做的开发人员毫不犹豫
— Danny22'9
123

别

只是，不要。

无论您做什么，都不能阻止用户完全访问您网站上的所有数据。只需关闭浏览器上的Javascript（或使用NoScript之类的插件），就可以对您编写的任何Javascript进行模拟。此外，无法禁止任何用户为您的站点简单地“查看源代码”或“查看页面信息”（或使用wget）。

这不值得付出努力。它实际上不会工作。这将使您的网站对用户产生积极的敌意。他们会注意到这一点并停止访问。这样做没有任何好处，只有浪费的精力和丢失的流量。

别。

更新：随着时间的流逝，这个小话题似乎已经引起很大争议。即使这样，我仍然支持这个问题的答案。有时正确的答案是建议，而不是字面意思。

希望找到如何创建自定义上下文菜单的人迷失了这个问题，应该看看其他地方，例如这些问题：

— 楔
source
229
哇，我不敢相信这是一个可以接受的答案。在特定条件下，删除Web应用程序中的右键单击有许多有效的用途。
— GAgnew 2011年
84
真正的答案应该是：<body oncontextmenu="return false;">
— 塞巴斯蒂安·格里戈诺利
18
@GAgnew：有有效的用法来替换上下文菜单。没有有效的用户可以无条件地禁用右键单击，并且不能以有用的方式对其进行处理
— ThiefMaster 2012年
80
如果用户想制作HTML5电子游戏，则禁用右键单击可能会非常有用。通常，这是不希望的，但是仅在没有适当上下文的情况下说“不要”就没有帮助。
— 罗布森·弗朗萨
51
我也是-1。这个答案没有帮助。有很多充分的理由来禁用右键单击。例如，我创建了一个可供医院在前台使用的Web应用程序，并且用户在技术上并不精明。即使该应用程序在其网络浏览器中运行，他们也不理解为什么右键单击时会出现所有菜单选项。我们以为那些是应用程序一部分的人收到了很多帮助问题，询问我们这些选项的用途。在这种情况下，禁用它们很有意义，并且在许多其他Web应用程序中也是如此。
— Nicholas
66

最初的问题是关于在用户可以禁用JavaScript的情况下如何停止右键单击：这听起来像是邪恶的和邪恶的（因此得到否定的响应）-但是所有重复项都重定向到此处，即使许多重复项要求的目的是减少邪恶。

例如，就像在HTML5游戏中使用右键单击按钮一样。这可以通过上面的内联代码来完成，或者更好一点的是这样的：

document.addEventListener("contextmenu", function(e){
    e.preventDefault();
}, false);

但是，如果要制作游戏，请记住，右键单击按钮会触发contextmenu事件-但它也会触发常规的mousedown和mouseup事件。所以你需要检查事件的这属性，以查看触发事件的鼠标按钮是左侧（哪个=== 1），中间（哪个=== 2）还是右侧（哪个=== 3）。

这是jQuery中的一个示例-请注意，按下鼠标右键将触发三个事件：mousedown事件，contextmenu事件和mouseup事件。

// With jQuery
$(document).on({
    "contextmenu": function(e) {
        console.log("ctx menu button:", e.which); 

        // Stop the context menu
        e.preventDefault();
    },
    "mousedown": function(e) { 
        console.log("normal mouse down:", e.which); 
    },
    "mouseup": function(e) { 
        console.log("normal mouse up:", e.which); 
    }
});

因此，如果您在游戏中使用左右鼠标按钮，则必须在鼠标处理程序中执行一些条件逻辑。

— 议长先生
source
如果我已dom.event.contextmenu.enabled在Firefox中启用，即使没有启用mousedown和mouseup事件，仍会触发和事件contextmenu吗？
— robertc
43

如果您不希望每次尝试右键单击时都通过消息提醒用户，请尝试将其添加到您的正文标签中

<body oncontextmenu="return false;">

这将阻止所有对上下文菜单的访问（不仅是鼠标右键，还有键盘）。

但是，正如其他答案中所述，添加右键单击禁用器确实没有意义。任何具有基本浏览器知识的人都可以查看源并提取所需的信息。

— 乘0
source
是的，但是有时候我想与我认识的缺乏基本浏览器知识的人简短地共享图像。禁用右键单击并不是百分百的万无一失，但是如果我仅发布图像几分钟以便让该人查看，那是非常安全的。
— WillO 2014年
启用触摸的系统有时会将某些触摸事件（例如长按）映射到右键单击（从而打开上下文菜单）。但是，此行为可能是不希望的，防止该行为的唯一有意义的方法似乎是完全禁用上下文菜单。
— OR Mapper 2014年
@WillO：我有一个类似的用例需要满足，但仅供参考，用户将始终使用屏幕截图。
— 哈桑·拜格
28

如果您是jquery的粉丝，请使用此

    $(function() {
        $(this).bind("contextmenu", function(e) {
            e.preventDefault();
        });
    });
— 维什努·维克拉曼（Vishnu Vikraman）
source
4
这是无缘无故地使用jQuery。这与在议长先生的答案中发现的单个JavaScript语句完全相同，后者在此之前的1½年发布。顺便说一句，该答案还包括一个jQuery解决方案，您也不需要它。有人赞成这个答案吗？为什么这要等待文档准备事件停止以阻止上下文菜单出现？为什么this在ready事件中使用此方法？为什么用bind代替on？
— gh
20

首先，如果不使用客户端功能，就无法实现这一目标。这是javascript运行的地方。

其次，如果您试图控制最终用户可以从您的网站中消费什么，那么您需要重新考虑如何显示该信息。图像具有可以通过HTTP提取而无需浏览器的公共URL。

身份验证可以控制谁有权访问哪些资源。

在图像中嵌入水印可以证明该图像来自特定的人/公司。

归根结底，资源管理实际上是用户/来宾管理。

互联网的第一条规则，如果您不想使用它，请不要公开！

互联网的第二条规则，如果您不想使用它，请不要将其放在互联网上！

— 韦恩
source
20

如大多数人所说，如果您的目标是防止人们能够下载您的图像，则禁用右键单击几乎是无效的。

假设您尝试保护图像，则替代方法是-

使用Flash Player，用户无法像这样下载它们，但是他们可以轻松地进行屏幕捕获。

如果您想变得更笨拙，请将图片设为div的背景，并包含透明图片àla-

<div style="background-image: url(YourImage.jpg);">
   <img src="transparent.gif"/>
</div>

足以阻止您的图像被随意盗用（请参见下面的示例），但是与所有这些技术一样，通过对html的基本理解可以轻松解决。

— 仇视
source
2
您甚至可以将映像加载为base64，以进一步混淆代码。
— Miguel Bartelsman'9
16

如果不使用Javascript，就无法完成您要问的问题。您可能选择使用的任何其他技术只能帮助在服务器端编写要发送到浏览器的网页。

根本就没有好的解决方案，没有Javascript就没有解决方案。

— 安东尼
source
1
即便如此，它对于用户而言还是很烦人的，更不用说容易绕过了。
— Manos Dilaverakis 09年
1
我只看过页面上有一个模式弹出框，上面写着“禁用右键单击”，然后在您关闭它时显示右键菜单。当您使用触控板滚动时，它们还会显示消息，这很烦人。
— Pete Kirkham
1
是的，这特别令人讨厌，因为通常是为了防止人们“窃取”其硬盘上已经存在的图像，但是这样做只是阻止了我使用上下文搜索：addons.mozilla.org/en-US/firefox/addon/240。那些混蛋…
— 加尔文（Calvin）
2
我喜欢几乎每个答案都是“可以，请使用javascript！”。
— 查尔斯伍德
14

如果您的目标是禁止用户简单地保存图像，则还可以检查单击的目标是否为图像，在这种情况下只能禁用右键单击。因此，右键单击可用于其他目的。摘自上面的代码：

document.addEventListener("contextmenu", function(e){
    if (e.target.nodeName === "IMG") {
        e.preventDefault();
    }
}, false);

这只是为了消除保存图像的最简单方法，但是仍然可以做到。

— 安德鲁
source
我认为这是最好的方法-作为网络用户，我有时会发现右键单击功能很有用，但作为一种简单，简单（是的，容易打败）的解决方案，它却不会令人烦恼。
— 2016年
9 
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
$('img').bind('contextmenu', function(e){
return false;
}); 
});//]]>  
</script>
</head>
<body>
    <img src="http://www.winergyinc.com/wp-content/uploads/2010/12/ajax.jpg"/>
</body>

— aravind3
source
— robertc 2012年
2
@ aravind3我使用了您的示例，它很有效！我的图像仍然可以单击，并且可以按应有的方式运行，但无法下载。我要禁用右键单击的原因是，只想要一张图片然后立即离开的访问者会影响我的跳出率。至少这样，我的跳出率不会那么糟糕，因为可能需要1或2分钟才能弄清楚：)干杯aravind3 !!!!
— coolydude13年
6

像下面那样做（它也可以在firefox上工作）： 

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

     if( e.button == 2 ) {
         e.preventDefault();
          callYourownFucntionOrCodeHere();
     }
return true;
});
— 恩通纳
source
5

将此代码放入<head>页面标签中。

<script type="text/javascript"> 
function disableselect(e){  
return false  
}  

function reEnable(){  
return true  
}  

//if IE4+  
document.onselectstart=new Function ("return false")  
document.oncontextmenu=new Function ("return false")  
//if NS6  
if (window.sidebar){  
document.onmousedown=disableselect  
document.onclick=reEnable  
}
</script>

这将禁用在整个网页上的右键单击，但仅在启用JavaScript的情况下。

— 特哈斯
source
这在firefox上不起作用，它禁用了表单键入的输入选择:(
— ALWAN
5

我曾使用此代码禁用任何网页上的右键单击，其工作正常。您可以使用此代码

jQuery(document).ready(function(){
  jQuery(function() {
        jQuery(this).bind("contextmenu", function(event) {
            event.preventDefault();
            alert('Right click disable in this site!!')
        });
    });
});
<html>
  <head>
    <title>Right click disable in web page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    You write your own code
  </body>
</html>
展开摘要

— 阿文达·库马尔
source
4

当然，根据此处的所有其他注释，这根本行不通。

我曾经为客户端构造了一个简单的Java小程序，该程序强制通过屏幕捕获来完成图像的任何捕获，并且您可能想考虑类似的技术。它在限制范围内起作用，但我仍然认为这是浪费时间。

— 克鲁阿坎
source
4 
    <script>
        window.oncontextmenu = function () {
            console.log("Right Click Disabled");
            return false;
        }
    </script>
— 安布
source
3

尝试这个

<script language=JavaScript>
//Disable right mouse click Script

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>
— 迪佩什
source
2 
 $(document).ready(function () {
            document.oncontextmenu = document.body.oncontextmenu = function () { return false; }
        });
— Soheil Bijavar
source
2

我知道我迟到了，但是我想为我要提供的答案创建一些假设和解释。

我可以禁用右键单击吗

我可以不使用Java脚本禁用网页上的右键单击吗？

是的，通过使用JavaScript，您可以禁用任何发生的事件，并且只能通过javaScript进行。您需要做的是：

  1. 工作硬件

  2. 您可以从中了解密钥代码的网站或某个地方。因为您将需要它们。

现在，假设您想阻止回车键，这里是代码： 

function prevententer () {
 if(event.keyCode == 13) {
  return false;
 }
}

对于右键单击，请使用以下命令： 

event.button == 2

代替event.keyCode。然后您将阻止它。

我想问这个问题，因为大多数浏览器都允许用户通过Javascript禁用它。

没错，浏览器允许您使用JavaScriptjavascript来完成整个工作。您不需要设置任何内容，只需要在头中添加script属性。

为什么不应该禁用它？

对此的主要且快速的回答是，用户不会喜欢它。每个人都需要自由，没有人，我的意思是没有人想要被阻止或禁用。几分钟前，我在一个站点上，该站点阻止了我单击鼠标右键，我觉得为什么？您需要保护源代码吗？然后在这里ctrl+shift+J我打开了Console，现在我可以转到HTML-code选项卡。来阻止我 这不会为您的应用添加任何安全层。

右键单击中有很多有用的菜单，例如“复制”，“粘贴”，在Google中搜索“文本”（在Chrome中）等。因此，用户希望获得轻松访问，而不是记住很多键盘快捷键。任何人仍然可以复制上下文，保存图像或执行他想做的任何事情。

浏览器使用鼠标导航：某些浏览器（例如Opera）使用鼠标导航，因此如果禁用它，用户肯定会讨厌您的用户界面和脚本。

这就是基本知识，我将写更多有关保存源代码的内容，但是，让它成为您问题的答案。

参考键码：

按键和鼠标按钮代码：

http://www.w3schools.com/jsref/event_button.asp

https://developer.mozilla.org/zh-CN/docs/Web/API/event.button（也将受到用户的赞赏）。

为什么不禁用右键单击：

http://www.sitepoint.com/dont-disable-right-click/

— Afzaal Ahmad Zeeshan
source
1

Javascript：

document.getElementsByTagName("html")[0].setAttribute("oncontextmenu", "return false");
— زياد
source
0

重要说明：是否允许这种预防取决于浏览器和OS！

你应该做吗？ 没有。因为这不会阻止用户，但只会使他/她烦恼。

可以使用吗？ 是的。示例：在某些您想要具有自定义弹出菜单的Web应用程序中，在游戏中用户可能会因误单击鼠标右键而惹恼用户，以及其他情况。

铬（V65）在Ubuntu 16.04 =你CAN禁用右键单击。

Mac OS 10.11中的Chrome（v65）=您无法禁用右键单击。

Windows 7中的Chrome（v65）=您无法禁用右键单击。

火狐（V41）中的Mac OS 10.11 =你CAN禁用右键单击。

火狐（V43）在Windows 7 =你CAN禁用右键单击。

// Vanilla JS way
document.addEventListener('contextmenu', function(e){
    e.preventDefault();
});

// jQuery way
$(document).bind('contextmenu', function(e) {
    e.preventDefault();
});
— 邪恶的玲子
source
0

需要考虑的几件事：

Chrome浏览器中的“允许右键单击”之类的浏览器插件存在是有原因的，您将无法解决它们。您根本无法采取任何措施阻止人们下载您的内容，因为他们实际上必须下载内容才能在浏览器中看到它们。人们尝试，但它总是在那里。

通常，如果内容不应该公开，则不要将其放在网上。

同样，无法右键单击也是可访问性问题，在许多情况下，这会构成对盲人，残疾人或老人的非法歧视。请查看您当地的法律，但在美国，它会以联邦ADA的形式积极违反法律，因为可能有视力问题的盲人或老年人是受法律保护的阶层。

因此，不要这样做，并且要浪费大量的时间和精力，甚至不必费心尝试这样做。它可能只是使您的公司受到起诉，或者使他们未能通过合规性审核。

— 诚实的
source
0

尝试使用此代码禁用检查元素选项

    jQuery(document).ready(function() {
    function disableSelection(e) {
        if (typeof e.onselectstart != "undefined") e.onselectstart = function() {
            return false
        };
        else if (typeof e.style.MozUserSelect != "undefined") e.style.MozUserSelect = "none";
        else e.onmousedown = function() {
            return false
        };
        e.style.cursor = "default"
    }
    window.onload = function() {
        disableSelection(document.body)
    };

    window.addEventListener("keydown", function(e) {
        if (e.ctrlKey && (e.which == 65 || e.which == 66 || e.which == 67 || e.which == 70 || e.which == 73 || e.which == 80 || e.which == 83 || e.which == 85 || e.which == 86)) {
            e.preventDefault()
        }
    });
    document.keypress = function(e) {
        if (e.ctrlKey && (e.which == 65 || e.which == 66 || e.which == 70 || e.which == 67 || e.which == 73 || e.which == 80 || e.which == 83 || e.which == 85 || e.which == 86)) {}
        return false
    };

    document.onkeydown = function(e) {
        e = e || window.event;
        if (e.keyCode == 123 || e.keyCode == 18) {
            return false
        }
    };

    document.oncontextmenu = function(e) {
        var t = e || window.event;
        var n = t.target || t.srcElement;
        if (n.nodeName != "A") return false
    };
    document.ondragstart = function() {
        return false
    };
});
— Agan116
source
1
感谢您提供此代码段，它可能会提供一些有限的短期帮助。通过说明为什么这是一个解决问题的好方法，适当的解释将大大提高其长期价值，并且对其他存在类似问题的读者来说，它将更加有用。请编辑您的答案以添加一些解释，包括您所做的假设。
— Toby Speight
在Chrome中可以非常轻松地覆盖它：单击个人资料图片旁边的3个点>更多工具>开发人员工具
— sportzpikachu
-1

使用该功能可以禁用右键click.You可以通过禁用左键和自来水也checking 1 and 0相应

document.onmousedown = rightclickD;
            function rightclickD(e) 
            { 
                e = e||event;
                console.log(e);
                if (e.button == 2) {
                //alert('Right click disabled!!!'); 
                 return false; }
            }
— CodeBreaker
source
使用Java
— 脚本
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.