如何禁用右键单击我的网页？
Vin*_*dey 292 javascript
我可以在不使用JavaScript的情况下禁用右键单击我的网页吗？我问这个是因为大多数浏览器允许用户禁用JavaScript.
如果没有,我如何使用JavaScript禁用右键单击？
cle*_*tus 481
您可以通过为"contextmenu"事件添加事件侦听器并调用preventDefault()方法来使用JavaScript :
document.addEventListener('contextmenu', event => event.preventDefault());
话虽如此:不要做.
为什么？因为它除了烦人的用户之外什么都没有.此外,许多浏览器都有一个安全选项,禁止禁用右键单击(上下文)菜单.
不知道为什么你想要.如果出于某种错误的信念,你可以用这种方式保护你的源代码或图像,那就再想一想:你做不到.
- 使用`oncontextmenu ="返回false"`除了正文之外的其他东西可能有意义,例如在画布上. (75认同)
- 我们正在部署到自助服务终端机器上并选择这种方式来禁止用户刷新页面. (59认同)
- 旧线程,但万一有人读它,并不是所有的网络开发人员都为自己制作他们自己的网站,有时客户来找你并坚持禁用右键,当你试图说服他,他只会寻找另一个开发人员,他会这样做不加思索 (54认同)
- @ToddHorst在这种情况下我会使用一个特殊的"Kiosk"版本的浏览器,没有任何UI,通常也没有任何上下文菜单:) (20认同)
- 启用触摸的系统有时会将某些触摸事件(例如长按)映射到右键单击(从而打开上下文菜单).但是,这种行为可能是不可取的,防止它的唯一有意义的方法似乎是完全禁用上下文菜单. (14认同)
- 我需要为浏览器游戏的某些部分禁用右键单击上下文菜单.在告诉别人"不要这样做"之前要三思而后行 (5认同)
- “话虽这么说：不要这样做。”这是个人观点，个人观点虽然值得欢迎，但不应以代表事实的方式表述。对于那些感兴趣的人来说，很多大网站都这样做。Gmail 就是我脑海中浮现的一个例子。我很确定世界上一半的人都在使用 Gmail，而且可能很少有人注意到在某些区域无法右键单击。禁用右键单击有很多充分的理由。包含活动内容、基于 html 的游戏、api、敏感字段等的网站。 (5认同)
- Downvote.我需要这个在我的地图上右键单击平移.我认为这很合理.你的答案不适用于我正在使用的canvas元素. (4认同)
- 请勿仅与用例有关.也许您不应该将它用于简单的网站,但Web技术在很多地方使用.我们在工厂中使用触摸屏的Kiosk浏览器中使用HTML界面; 触摸屏有时会看到脏手指右键 - 防止右键点击解决了这个问题. (4认同)
- 它不是真正的"javascript或html",它只是真正的"和",因为"仅限html"方式将需要javascript,如果不可用/禁用,将无法运行. (3认同)
- 如果您正在处理交互式图形并且意外的右键单击使交互变得混乱，这将很有用... (3认同)
- 我们将Web浏览器的内容区域嵌入到桌面应用程序中，我们不希望用户能够右键单击以查看例如页面的源或属性。这是当您希望禁用网页右键单击时的另一个很好的示例。 (2认同)
- 我们需要这个，这样我们的非技术客户就不会做愚蠢的事情，比如触摸和按住，然后打开开发人员工具并打电话给我们询问新功能是什么以及他们应该如何使用它。（大多数用户都是技术白痴。）所以有时这是一个合法的用途。 (2认同)
- 嘿,我只想禁用右键单击滑行,因为有时我在玩游戏时不小心右键单击,然后我就死了. (2认同)
- 我在这里没有看到的一个用例是视频游戏和其他 3D 模拟。您可能希望将右键单击重新用于导航等其他命令 (2认同)
- 每个人都说“不要这样做”，但没有考虑到所有目的。我们中的一些人已经构建了信息亭模式应用程序，用户需要的一切都已经在界面上。信息亭用户的能力仅限于应用程序或本例中的页面。禁用右键单击只是您希望为信息亭模式用户提供的额外限制，因为他们不应该尝试右键单击并首先查看代码。- 如果该应用程序是为公众构建的，我无法理解“不要这样做”的反应，出于信息亭模式的目的，肯定有需要。 (2认同)
- 这里只是一个随机评论，“不要这样做”并不是真正的建议，禁用上下文菜单是一个功能，应该使用它，如果我正在构建一个网页设计平台，我想允许用户以有益的方式使用他的鼠标，因为原始的上下文菜单在我的应用程序概念中毫无意义。 (2认同)
- “因为它除了烦人之外什么也做不到” - 所以你认为如果我正在制作一个远程桌面应用程序，没有在相关菜单上弹出另一个上下文菜单，那么实际上就可以使用你想要的那个，是“烦人”吗？ (2认同)
Wed*_*dge 124
别
只是,不要.
无论您做什么,都无法阻止用户完全访问您网站上的所有数据.您编写的任何Javascript都可以通过简单地在浏览器上关闭Javascript(或使用像NoScript这样的插件)来实现.此外,没有办法禁止任何用户只为您的网站"查看来源"或"查看页面信息"(或使用wget).
这不值得努力.它实际上不会起作用.它会使您的网站对用户产生积极的敌意.他们会注意到这一点并停止访问.这样做没有任何好处,只会浪费精力和流量.
别.
更新:随着时间的推移,这个小主题似乎已经证明很有争议.即便如此,我仍然坚持这个问题的答案.有时,正确的答案是建议而不是文字回答.
想要找到如何创建自定义上下文菜单的人偶然发现这个问题应该在其他地方寻找,例如这些问题:
- 为我的web-app制作自定义右键单击上下文菜单,它依赖于jQuery
- 如何将自定义右键单击菜单添加到使用纯javascript/html 的网页
- 哇我无法相信这是一个公认的答案.在特定条件下删除webapp中的右键单击有许多有效用途. (219认同)
- 真正的答案应该是:`<body oncontextmenu ="return false;">` (79认同)
- 如果用户想要制作HTML5视频游戏,则禁用右键单击可能非常有用.通常,这是不可取的,但只是在没有适当背景的情况下说"不要"并没有那么有用. (76认同)
- -1也来自我.这个答案没有帮助.禁用右键单击有很多充分的理由.例如,我创建了一个医院在前台使用的Web应用程序,并且用户在技术上并不精通.即使应用程序在其Web浏览器中运行,他们也不明白为什么所有菜单选项在右键单击时出现.我们收到了大量的帮助问题,询问我们的选项是什么,来自那些认为自己是应用程序一部分的人.在这种情况下禁用它们是有意义的,并且在许多其他Web应用程序中也是如此. (50认同)
- @GAgnew:有一些有效的用途来替换上下文菜单.没有有效的用户可以无条件地禁用右键,而无需以有用的方式处理它们 - (17认同)
- -1.道德论证不是SO的重点.如果他想禁用右键单击,他可能有一个理由 - 不是你打扰发现.也许你可以改写你的评论,并提出如何不惹恼你的用户,同时做这个帖子不是浪费时间.谷歌文档右键单击禁用 - 我想你会选择召集技术主管并告诉他他在Gdocs上的每个用户都很烦？ (11认同)
- 这是一个可怕的答案,部分是因为它没有回答问题,部分原因是它自动假设提问者试图隐藏他们的javascript.我找到了隐藏它的方法,因为右键菜单妨碍了页面功能 - 而是我得到"不要隐藏你的代码!" (7认同)
- 由于@GAgnew的原因与-1相同,但我确实认识到"保护"内容可能是用户所追求的内容.关于禁用右键单击的另一个原因是,该业务目标可能是让_harder_复制_most_ people的内容.极客!=大多数用户. (6认同)
- 这肯定是我在stackoverflow上看到过的最高评价的最差答案.而且它也非常狭隘.仅仅因为一个人的大脑无法想象某些东西,这并不意味着没有其他人有正当理由.在这种情况下,它有很多. (6认同)
- 有时,我几乎没有得到堆栈.如果用户询问如何在他的头部植入钉子,正确的答案是"用锤子".然后(并且,然后,imvho)添加:"我认为这不是一个好主意,因为a,b,c." (5认同)
- 而且,这实际上是一个非常自命不凡的答案.现在有很多理由禁用右键单击上下文菜单,只需打开谷歌驱动器页面即可看到一个正确的例子. (4认同)
- HTML中的视频游戏UI怎么样？ (3认同)
- @SebastiánGrignoli例如,如果Firefox用户设置了[`dom.event.contextmenu.enabled`](http://kb.mozillazine.org/About:config_entries#DOM),那么你的"真正答案"将无效. (2认同)
- 对真实答案的真实反对. (2认同)
- @SebastiánGrignoli:然后,用例不会被称为"禁用右键单击" (2认同)
- @peteorpeter OP可能是在保护他的内容之后,但问题是"我如何禁用右键单击我的网页？" 有些人从搜索引擎到这里寻找合适的答案. (2认同)
- 我正在制作一个关卡编辑器,他有一个动作必须右击.这是一个完美的有效而非"邪恶"的案例,只是在一个div上.也许您应该补充一点,您没有义务将此HTML事件绑定到正文但仅限于一个div？ (2认同)
- 这不是一个有用的答案。我有一个专为一小部分客户设计的网站。他们必须输入凭据才能查看这些带有产品图片的页面。这些用户在技术上并不成熟。对于他们来说，使用右键单击“另存为”将是他们能力的极限。即使少数人能弄明白，也没关系，但大多数人不会。所以这是一个完全有效的用例，它旨在使事情变得更安全，即使它不是万无一失的，并且它位于私人站点上。 (2认同)
- 减号 1. 问题不是 IF，而是 HOW。 (2认同)
- 122赞成这个古老的答案令人难以置信.请花一点时间来投票. (2认同)
- 这并不能回答问题——提供建议固然很好，但也请考虑给出真正的答案。如今，网络技术已在许多地方使用，您是否应该这样做实际上取决于用例。就我个人而言，我们在许多运行信息亭应用程序的触摸设备上禁用了此功能，因为它绝对没有用处。不小心双击并打开开发者工具给工厂工人带来了很多困惑。禁用右键单击解决了这个问题。 (2认同)
- 在开发基于网络的视频游戏时，通常期望右键单击执行游戏内功能，而不是调出浏览器上下文菜单。 (2认同)
- 在很多情况下您想要阻止 UI 中的上下文菜单。如果您拥有系统的完全访问权限，您始终可以打开开发控制台。有时您只是不想看到上下文菜单。就那么简单 (2认同)
- 这怎么算是一个答案呢？OP想要一个解决方案：“禁用网页上的右键单击” - 他们没有询问您的意见，或者他们是否应该这样做。当然，您有权留下您对该主题的想法，但至少提供一些可以帮助他们解决问题的反馈。您想要禁用网页上的右键单击上下文菜单的原因有很多。首先，在网络游戏中。当然，开发人员工具可以在其他地方轻松打开，但人们可能希望在游戏中使用右键单击按钮来实现不同的功能。 (2认同)
Mr *_*ker 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);
}
});
因此,如果您在游戏中使用鼠标左键和右键,则必须在鼠标处理程序中执行一些条件逻辑.
by0*_*by0 39
如果您不想在每次尝试右键单击时向用户发出消息警报,请尝试将其添加到您的正文标记中
<body oncontextmenu="return false;">
这将阻止对上下文菜单的所有访问(不仅来自鼠标右键,还来自键盘).
但是,正如其他答案中所提到的,添加右键禁用器确实毫无意义.具有基本浏览器知识的任何人都可以查看源并提取他们需要的信息.
- 是的，但有时我想与我知道缺乏基本浏览器知识的人简短地分享图像。禁用右键单击并不是 100% 万无一失，但如果我将图像发布几分钟让那个人看一下，那就非常安全了。 (2认同)
- 支持触摸的系统有时会将某些触摸事件（例如长按）映射到右键单击（从而打开上下文菜单）。然而，这种行为可能是不可取的，防止这种行为的唯一有意义的方法似乎是完全禁用上下文菜单。 (2认同)
Vis*_*man 27
如果你是一个jquery粉丝,请使用它
$(function() {
$(this).bind("contextmenu", function(e) {
e.preventDefault();
});
});
- 这是无缘无故使用jQuery的。这与议长先生的答案中发现的单个JavaScript语句完全相同，后者在此之前的1½年发布。顺便说一句，该答案还包括一个jQuery解决方案，您也不需要它。有人赞成这个答案吗？为什么这要等待文档就绪事件停止以阻止上下文菜单出现？为什么在ready事件中使用`this`？为什么使用`bind`而不是`on`？啊... (2认同)
小智 20
如果你的目的是阻止人们下载你的图像,就像大多数人所说的那样,禁用右键点击几乎是无效的.
假设您正在尝试保护图像,则替代方法是 -
使用Flash播放器,用户无法下载它们,但他们可以轻松地进行屏幕捕获.
如果你想更加习惯,可以将图像作为div的背景,包含透明图像,àla -
<div style="background-image: url(YourImage.jpg);">
<img src="transparent.gif"/>
</div>
将足以阻止您的图像随意盗窃(见下面的示例),但与所有这些技术一样,通过对html的基本理解而失败是微不足道的.
- 您甚至可以将图像加载为base64,以进一步混淆代码. (2认同)
Way*_*yne 19
首先,如果不使用客户端功能,则无法实现此目的.这是javascript运行的地方.
其次,如果您尝试控制最终用户可以从您的站点使用的内容,那么您需要重新考虑如何显示该信息.图像具有可以通过HTTP获取的公共URL,而无需浏览器.
身份验证可以控制谁有权访问哪些资源.
图像中嵌入的水印可以证明图像来自特定的人/公司.
在一天结束时,资源管理实际上是用户/客户管理.
互联网的第一条规则,如果你不想要它,不要公开它!
互联网的第二条规则,如果你不想要它,不要把它放在互联网上!
Ant*_*ony 16
如果不使用Javascript,你无法完成你所要求的.您可以选择使用的任何其他技术只能帮助撰写服务器端的网页以发送到浏览器.
根本没有好的解决方案,没有Javascript就没有解决方案.
- 即便如此，它对用户来说还是很烦人，更不用说很容易被绕过了。 (2认同)
- 我只见过有模态弹出窗口说“禁用右键单击”的页面，然后在您关闭它时显示右键单击菜单。当您使用触控板滚动时，它们还会显示该消息，这非常烦人。 (2认同)
- 是的，这特别烦人，因为通常它是为了防止人们“窃取”已经在硬盘上的图像，但它所做的只是阻止我使用上下文搜索：https://addons.mozilla.org/en-US/firefox /插件/240 。那些混蛋... (2认同)
- 我喜欢几乎每个答案都是“可以，请使用javascript！”。 (2认同)
小智 14
如果您的目标是禁止用户只是保存图像,您还可以检查点击的目标是否是图像,只有在这种情况下禁用右键单击.因此,右键单击可用于其他目的.取自上面的代码:
document.addEventListener("contextmenu", function(e){
if (e.target.nodeName === "IMG") {
e.preventDefault();
}
}, false);
这只是为了消除保存图像的最简单方法,但它仍然可以完成.
小智 12
简单的方法：
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
- 这应该是公认的答案，谢谢 (2认同)
小智 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我用了你的例子,它有效!我的图像仍然可以点击并按照预期的方式运行,但无法下载.我想要禁用右键单击的原因是,只想要图像然后立即离开的访问者会影响我的跳出率.至少在这种情况下,我的跳出率不会那么糟糕,因为它可能需要1或2分钟来计算出来:)干杯aravind3 !!!! (2认同)
有以下三种最流行的方法可以禁用网页上的鼠标右键单击。
#1 使用 HTML 正文标签
<body oncontextmenu="return false;">
#2 使用 CSS
body {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
-o-user-select: none;
user-select: none;
}
#3 使用 JavaScript
document.addEventListener('contextmenu', e => e.preventDefault());
如果您只想禁用右键单击以在网页上保存图像，请使用以下 CSS 解决方案：
your-img-tag {
pointer-events: none;
}
在同一图像上实施之前：
在同一图像上实施后：
在Chrome和Firefox 中测试工作。
小智 6
将此代码放入<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 时。
就像下面这样(它也适用于Firefox):
$(document).on("contextmenu",function(e){
if( e.button == 2 ) {
e.preventDefault();
callYourownFucntionOrCodeHere();
}
return true;
});
小智 6
我曾使用此代码在任何网页中禁用右键单击，它工作正常。您可以使用此代码
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>当然，根据这里的所有其他评论，这根本行不通。
我曾经为一个客户端构建了一个简单的 java 小程序，它强制通过屏幕捕获来完成任何图像的捕获，您可能会考虑使用类似的技术。它在限制范围内有效，但我仍然认为这是浪费时间。
<script>
window.oncontextmenu = function () {
console.log("Right Click Disabled");
return false;
}
</script>
| 归档时间： |
|
| 查看次数： |
646173 次 |
| 最近记录： |