logo标签列表

如何禁用网页右键点击？

javascript
437

我是否可以在网页上禁用右键菜单而不使用JavaScript？我之所以这样问是因为大多数浏览器允许用户禁用JavaScript。

如果不行，我该如何使用JavaScript禁用右键菜单？

174
禁用鼠标右键并不是安全的措施，只会让用户感到烦恼。任何不能禁用这个功能的浏览器都没有用处，但是一开始就这么做的网站很糟糕。 - Dan Olson
28
如果你不希望别人使用你的内容，就不要在网上发布它。现代浏览器甚至可以覆盖JavaScript禁用右键的能力。像Firebug / Web Dev Toolbar这样的工具使保护变得无效。 - epascarello
11
这是一个小的Chrome/Greesemonkey用户脚本，可以重新启用右键点击功能：http://dl.dropbox.com/u/464119/Programming/javascript/enable-rightclick.user.js - ripper234
36
@DanOlson，如果您想编写自己的右键菜单，例如在cPanel中找到的菜单，应该怎么做呢？ - Codesmith
37
@epascarello ，在一些情况下禁用右键是必要的，比如在信息亭终端上，因为用户实际上不需要使用它，而将其保留可能会让用户感到恼怒。 - Aram
显示剩余17条评论
32个回答
738

你可以使用JavaScript通过添加一个"contextmenu"事件监听器并调用preventDefault()方法来实现：

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

话虽如此：不要这样做。

为什么？因为这只会让用户感到恼怒，除此之外没有任何好处。而且很多浏览器都有一个安全选项来禁止禁用右键（上下文）菜单。

不确定你为什么想这样做。如果出于一些错误的信念以为可以通过这种方式保护你的源代码或图像，请再思考一下：你是做不到的。

133
在除了 body 之外的其他元素上使用 oncontextmenu="return false" 可能是有意义的，例如在 canvas 上。 - AdrienBrault
80
我们正在部署到自助机器上，并选择这种方式来禁止用户刷新页面。 - Todd Horst
27
在这种情况下，我会使用一种特殊的“Kiosk”浏览器版本，它没有任何用户界面，并且通常也没有上下文菜单 :) - mihi
26
有些支持触摸的系统会将某些触摸事件（如长按）映射到右键单击操作（从而打开上下文菜单）。然而，这种行为可能并不理想，唯一有效的防止方法似乎是完全禁用上下文菜单。 - O. R. Mapper
95
旧帖子，但如果有人看到它，请注意，并非所有网站开发者都是为自己的网站制作的，有时客户会来找你，并坚持禁用右键点击。当你试图说服他时，他只会去寻找另一个毫不犹豫地这样做的开发者。 - DJG22
显示剩余28条评论
133

不要这样做

无论你做什么，都不能阻止用户访问你网站上的每一位数据。你编写的任何JavaScript代码都可以通过在浏览器中关闭JavaScript（或使用像NoScript这样的插件）来使其无效。此外，没有办法禁用任何用户只需通过“查看源代码”、“查看页面信息”（或使用wget）来访问你网站的能力。

这样做没有任何意义。它实际上是对用户进行敌意行为。他们会注意到这一点并停止访问。这样做没有任何好处，只是浪费时间和失去流量。

别这样做。

更新：随着时间的推移，这个小问题似乎已经引起了很大的争议。即便如此，我仍然坚持我对这个问题的回答。有时正确的回答是建议而不是逐字回应。

希望通过这个问题找出如何创建自定义上下文菜单的人应该寻找其他地方，例如这些问题：

23
可以替换上下文菜单的情况是合理的。但是无条件禁用右键点击且没有有效处理方式是不合理的。 - ThiefMaster
114
如果用户想制作一个HTML5视频游戏，禁用右键可能非常有用。通常情况下，这并不是期望的行为，但仅仅说“不要这样做”而没有适当的背景信息并不是很有帮助。 - Robson França
21
道德论点不是 Stack Overflow 的重点。如果他想禁用右键，他可能有原因 - 而你并没有去了解。也许你可以重新表达你的评论，并提出如何在这样做时不要让用户感到烦恼的建议，以使这篇文章不成为浪费时间的东西。 Google 文档已禁用右键 - 我想你会选择打电话给技术负责人，并告诉他正在让 Gdocs 上的每个用户感到烦恼？ - dudewad
75
我也不赞成这个答案。禁用右键有很多好的原因。例如，我开发了一个医院前台使用的网络应用程序，用户不太懂技术。尽管应用程序在他们的Web浏览器中运行，但他们不理解为什么右键单击时会出现所有菜单选项。我们得到了大量的帮助请求，询问选项是用来做什么的，这些人认为它们是应用程序的一部分。在这种情况下禁用右键是有意义的，在许多其他网络应用程序中也是如此。 - Nicholas
11
这是一个糟糕的回答，部分原因是因为它没有回答问题，部分原因是因为它自动假设提问者试图隐藏他们的 JavaScript。我之前在寻找方法来隐藏代码，因为右键菜单妨碍了页面功能 - 结果我得到的是“不要隐藏你的代码！”请注意，下次给出的回答应该直接回答问题，并避免做出过多假设或指责。 - user2490157
显示剩余23条评论
87

原问题是关于如何阻止鼠标右键点击的，考虑到用户可能禁用JavaScript：这听起来有点不正当和邪恶（因此会得到负面回应） - 但所有重复的问题都被重定向到这里，尽管其中许多重复的问题是为了更少邪恶的目的而提出的。

比如在HTML5游戏中使用右键按钮，可以使用上面的内联代码实现，或者更好一点的方式是这样：

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

但是如果你正在制作游戏，那么请记住，右键按钮会触发 contextmenu 事件-但它也会触发常规的 mousedown 和 mouseup 事件。因此，您需要检查事件的 which 属性，以查看是左键 (which === 1)、中间键 (which === 2) 还是右键 (which === 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); 
    }
});

如果你在游戏中使用鼠标的左右键，那么你需要在鼠标事件处理程序中进行一些条件逻辑判断。

如果我在Firefox中启用了dom.event.contextmenu.enabled，即使contextmenu不会触发，mousedown和mouseup事件仍然会触发吗？ - robertc
75

如果您不希望每次用户尝试右键单击时都弹出提示消息，请尝试将以下内容添加到您的 body 标签中。

<body oncontextmenu="return false;">

这将阻止所有对上下文菜单的访问（不仅限于右键，还包括从键盘）。

然而，正如其他答案中所提到的，添加右键禁用程序确实没有任何意义。任何具备基本浏览器知识的人都可以查看源代码并提取他们需要的信息。

2
是的，但有时我想与一些基础浏览器知识匮乏的人简单分享一张图片。禁用右键并不是100%可靠的，但如果我只是为了让那个人看看而发布图片几分钟，这样做还是相当安全的。 - WillO
2
触摸屏系统有时会将某些触摸事件（如长按）映射到右键单击（从而打开上下文菜单）。然而，这种行为可能是不必要的，唯一有意义的防止方法似乎是完全禁用上下文菜单。 - O. R. Mapper
1
@WillO：我有一个类似的用例需要处理，但是请注意，用户总是会使用截图。 - Hassan Baig
28
如果你是jQuery的粉丝，请使用这个。
    $(function() {
        $(this).bind("contextmenu", function(e) {
            e.preventDefault();
        });
    });
11
这里没有必要使用jQuery。这段代码和Mr. Speaker在1年半前发布的单一JavaScript语句所做的完全相同。顺便提一下，那个答案也包括了一个jQuery解决方法，而你并不需要它。有没有谁点赞了这个答案但是不知道它到底做了什么？为什么要等待文档准备就绪事件来阻止上下文菜单的出现？为什么在ready事件内使用this？为什么要使用bind而不是on？ - Rudey
25
如果您的目标是禁止用户简单保存图像，则还可以检查所单击的目标是否为图像，仅在这种情况下禁用右键单击。因此，右键单击可用于其他目的。取自上面的代码：
如果你的目标是防止用户直接保存你的图片，你也可以检查点击的目标是否为图片，只有在这种情况下禁用右键单击。这样右键单击就可以用于其他操作。取自上述代码：
document.addEventListener("contextmenu", function(e){
    if (e.target.nodeName === "IMG") {
        e.preventDefault();
    }
}, false);

这只是为了防止最简单的图像保存方式，但仍然可以完成。

在我看来，这是最好的方式——作为一个网络用户，我时不时地发现右键功能很有用，但作为一种简单易行（是的，容易被攻击）的解决方案，它可以避免烦人的问题。 - Ben
25

首先，要实现这一点，您需要使用客户端功能。这是JavaScript运行的地方。

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

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

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

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

互联网的第一条规则是，如果您不希望它被拿走，请不要将其公开！

互联网的第二个规则是，如果您不希望它被拿走，请不要放在互联网上！

23

如果你的目的是防止人们下载你的图片，正如大多数人所说的那样，禁用右键基本上是无效的。

假设你正在尝试保护图片，替代方法包括-

使用Flash播放器，用户无法直接下载它们，但他们可以轻松地进行屏幕截图。

如果你想变得更加棘手，将图片作为div的背景，其中包含一个透明的图片，就像这样 -

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

这将足以阻止随意盗用您的图片（请参见下面的示例），但与所有这些技术一样，只要具备基本的HTML理解，就可以轻松地克服。

4
你甚至可以将图片作为base64加载，进一步混淆代码。 - Miguel Bartelsman
18

如果不使用Javascript，您将无法完成所需的操作。您选择使用的任何其他技术只能帮助组合在服务器端发送到浏览器的网页。

没有好的解决方案，也没有不使用Javascript的解决方案。

2
即便如此，这仍然会给用户带来麻烦，更不用说轻松绕过了。 - Manos Dilaverakis
3
我只看到过这样的页面：它们会弹出一个模态框，上面写着“右键已禁用”，但当你关闭对话框时，右键菜单就会出现。它们还会在你使用触控板滚动页面时显示这个消息，非常烦人。 - Pete Kirkham
2
是的，这真的很烦人，因为通常它是为了防止人们“窃取”已经在他们的硬盘驱动器上的图像，但它所做的只是阻止我使用上下文搜索：https://addons.mozilla.org/zh-CN/firefox/addon/240。这些混蛋... - Calvin
4
我很欣赏对这个问题的几乎每一个回答都是“当然，使用JavaScript！” - Charles Wood
17

如果您只想禁用在网页上通过右键保存图片功能，可以使用以下的CSS解决方案：

your-img-tag {
  pointer-events: none;
}

实施在同一张图片上之前： Before

实施在同一张图片上之后： After

已在Chrome和Firefox中测试通过。

Firefox用户可以直接按下alt键进入菜单栏，然后选择“视图”，再将“页面样式”更改为“无样式”，从而轻松绕过此问题。 - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接