HTML 中禁用右键单击上下文菜单
本文将重点介绍浏览器的右键单击上下文菜单。 我们将了解为什么开发人员认为他们应该禁用上下文菜单，并且我们还将观察他们不应该禁用的原因。
稍后，我们将通过不同的策略来禁用我们网站上的右键单击。
禁用右键单击的可能原因
在这里，我们将解释为什么我们应该避免禁用我们网站上的右键单击。
作为一名博主或开发者，我们不希望自己的作品在辛勤工作并创造性地完成后被窃取。 如果我们投入大量时间和精力来创建设计、图像或一段文字，我们可能希望通过防止右键单击网站来保护它。
我们经常遇到禁用右键单击的网站。 这可能看起来是一个绝妙的主意，但事实并非如此。
为什么？ 我们稍后会讨论这个。 让我们首先了解为什么我们认为我们需要禁用右键单击。
保护内容
每个网站上都有一些书面信息。 作家有时会花费大量时间为他们的网站创建最有价值和最实用的内容。
没有人希望他们的作品以不同的身份在别处发表。 因此，他们禁用右键单击以避免复制和利用他们的内容被复制并用于其他网站。
保护图像
大多数时候，网站所有者会投入大量资金购买高质量的照片作为内容。 当人们免费获得它们并在他们的网站上使用它们时，他们通常会感到浪费； 因此，他们禁用右键单击以保护照片。
保护源代码
开发人员付出了很多努力来创建独特且创新的网站。 为具有视觉吸引力和功能的网站编写 HTML、CSS 和 JavaScript 代码需要大量时间和精力。
一些网页设计师窃取别人网站的源代码，进行一些修改，然后将结果作为自己的发布。 因此，开发人员认为，在其网站上禁用页面源代码查看是保护其网站源代码的绝佳策略。
满足用户要求
有时禁用右键单击是 Web 应用程序的要求。 这取决于应用程序的目标受众。
例如，医院系统是为没有太多技术知识并最终点击不需要的选项的患者而设计的。 所以为了让他们的设计简单，所有不必要的点击都被设置为禁用。
为什么禁用右键单击不是一个好主意
我们已经讨论了开发人员考虑禁用其网站上的右键单击的需求，但我们说这不是一种有效的方法。 让我们讨论一下为什么。
烦扰用户
禁用右键单击只会激怒您的网站用户。 它只会使您的网站的使用变得更加复杂且用户友好性降低。
右键单击菜单为用户提供了许多有用的选项。 Chrome 网络浏览器为用户提供翻译选项，将网站翻译成用户选择的语言。
Chrome 右键单击菜单中的另一个重要功能是在您的设备之间共享链接，允许用户直接将任何链接从他们的 PC 发送到他们的手机，反之亦然。
对安全无影响
禁用右键单击并不安全。 它除了使从页面上保存项目变得更容易之外没有任何作用。
在浏览器中使用开发人员模式或禁用 JavaScript 都可以。 我们可以通过 Ctrl+U 快捷键访问源代码，使用 Ctrl+Shift+I 检查。
如果开发人员禁用右键单击以使他们的网站更安全，那么他们就走错了方向。 使用 JavaScript 禁用右键菜单，我们可以轻松地在浏览器中禁用 JavaScript 功能。
这是毫无意义的
如果你认为禁用右键单击可以保护您的源代码或照片，请再考虑一下。 任何决心窃取你的内容或代码的人都会这样做，无论他们是否能够访问浏览器上下文菜单。
正如我们所讨论的，这些上下文菜单为用户提供了方便的功能，通过禁用它们，你只是在限制用户使用有价值的功能。
现在很多人在线阅读，有时，他们希望在新选项卡中打开网站中的链接。 现在，浏览器在上下文菜单中提供了这个功能，如果菜单被禁用，用户会很生气。
但是，有一个快捷键。 如果我们在按住 Ctrl 键的同时单击链接，它将带我们到新选项卡，如果我们在按住 Shift 键的同时单击链接，它将带我们到新窗口。
但是有相当大的可能性用户可能不知道这一点，这会对他们造成干扰。
引起不必要的注意
禁用右键单击会使某些人更加坚定地找出您隐藏的内容。 这可能会适得其反，因为您的图片和源代码会引起不必要的注意。
此外，我们只能在启用了 JavaScript 的浏览器上禁用右键单击。 访问者可以通过在浏览器设置中关闭 JavaScript 来完全忽略脚本。
使用 HTML 事件处理程序禁用右键单击
到目前为止，我们已经讨论了开发人员认为在其网站上禁用右键单击上下文菜单的原因以及我们不应该这样做的一些原因。 现在，让我们讨论一些禁用右键单击的方法。
我们可以使用 HTML 元素中的 oncontextmenu 轻松禁用我们网站上的右键单击上下文菜单。 当有人右键单击 HTML 元素以显示上下文菜单时，会触发 oncontextmenu 事件。
检查下面的代码以了解这一点。
<html>
<body oncontextmenu="return false">
<p>
You cannot right-click here.
</p>
</body>
</html>
我们将 oncontextmenu 设置为等于 false。 这意味着当用户右键单击打开任何网站的上下文菜单时，它将返回 false，并且菜单不会打开。
你可能已经注意到我们将 oncontextmenu 放在 body 标签上，这意味着右键单击 HTML 的主体不会触发上下文菜单。 无需禁用整个页面的右键单击。
如果你禁用菜单的唯一目的是保护图像，你可以将 oncontextmenu 放在图像标签上。
使用 JavaScript 禁用右键单击
我们也可以使用 JavaScript 来实现相同的目标。 查看下面的代码，了解我们如何使用 JavaScript 来实现我们想要的功能。
<html>
<head>
<script>
document.addEventListener('contextmenu', event => event.preventDefault());
</script>
</head>
<body>
You cannot right-click here.
</body>
</html>
addEventListener() 函数将事件处理程序添加到指定的元素。 第一个参数是事件类型（与任何 HTML DOM 事件一样），第二个参数指定事件发生时要调用的函数。
如果事件是可取消的，则 preventDefault() 方法将阻止事件的默认操作发生。
禁用右键单击图像
在这种方法中，我们将只专注于保护我们网站的图像。 正如我们上面所讨论的，禁用对整个页面的右键单击不会给用户留下良好的印象。
我们可以在 JavaScript 的帮助下轻松做到这一点。 我们可以只定位 HTML 的图像标记，而不是整个 HTML 页面的主体。
检查下面的代码以了解如何。
<html>
<head>
<script>
document.addEventListener("contextmenu", function(e){
if (e.target.nodeName === "IMG") {
e.preventDefault();
}
}, false);
</script>
</head>
<body>
<img src="/img/jiyik/logo.png"/>
</body>
</html>
让我们深入看看代码。
我们相信大家此时已经了解 JavaScript 的 addEventListener() 函数。 我们之前已经了解了函数的参数，所以让我们看一下第二个参数，它代表一个函数，当第一个参数中指定的事件发生时将被触发。
当事件发生时，引起事件的元素称为发射器，称为目标，或者简单地说，目标返回触发特定事件的 DOM 元素。 nodeName 函数返回元素的节点名称。
总之，e.target.nodeName 返回用户右键单击的元素名称。 在代码中，我们验证了如果被点击的元素名称是 IMG，它不应该执行第一个参数中指定的事件。
相关文章
HTML 中的 role 属性
发布时间：2023/05/06 浏览次数：124 分类：HTML
-
本篇文章介绍 HTML role属性。HTML中 role 属性介绍，role 属性定义描述语义的 HTML 元素的角色。
在 HTML 中打印时分页
发布时间：2023/05/06 浏览次数：188 分类：HTML
-
本篇文章介绍如何在打印 HTML 页面或内容时强制分页。将 page-break-after 属性设置为 always Inside @media print to Page Break in HTML
在 HTML 中显示基于 Cookie 的图像
发布时间：2023/05/06 浏览次数：154 分类：HTML
-
本文介绍如何根据 HTML 中的 cookies 显示图像。根据 HTML 中设置的 Cookies 显示图像。问题陈述是我们需要根据网页传递的cookie来显示特定的图像。
在 HTML 中创建下载链接
发布时间：2023/05/06 浏览次数：140 分类：HTML
-
本文介绍如何在 HTML 中创建下载链接。使用 download 属性在 HTML 中创建下载链接.。我们可以使用 HTML 锚元素内的下载属性来创建下载链接。
HTML 中的 ::before 选择器
发布时间：2023/05/06 浏览次数：70 分类：HTML
-
本教程介绍 CSS ::before 伪元素。CSS ::before 伪元素。 ::before 选择器是一个 CSS 伪元素，我们可以使用它在一个或多个选定元素之前插入内容。 它默认是内联的。
在 HTML 中创建一个可滚动的 Div
发布时间：2023/05/06 浏览次数：54 分类：HTML
-
本篇文章介绍如何使 HTML div 可滚动。本文将介绍在 HTML 中使 div 可滚动的方法。 我们将探索垂直和水平滚动，并通过示例查看它们的实现。
HTML 显示箭头的代码
发布时间：2023/05/06 浏览次数：153 分类：HTML
-
一篇关于用于显示箭头的 Unicode 字符实体的紧凑文章。本文讨论使用 Unicode 字符实体在我们的 HTML 页面上显示不同的字符。 HTML 中使用了许多实体，但我们将重点学习表示上、下、左、右的三角
在 HTML 中启用和禁用复选框
发布时间：2023/05/06 浏览次数：149 分类：HTML
-
本篇文章介绍如何启用和禁用 HTML 中的复选框。HTML 中的复选框 复选框是一个交互式框，可以切换以表示肯定或否定。 它广泛用于表单和对话框。
HTML 中的只读复选框
发布时间：2023/05/06 浏览次数：198 分类：HTML
-
本篇文章介绍了如何在 HTML 中制作只读复选框。本文是关于如何使 HTML 复选框控件成为只读组件的快速破解。 但是，首先，让我们简要介绍一下复选框控件。
