在 JavaScript 中禁止在网页上点击右键

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中禁止在网页上点击右键

作者：迹忆客最近更新：2024/03/23 浏览次数：

在创建博客、网站或网页时，我们有时需要禁用右键单击按钮。

本文将讨论一些我们可以用来禁用右键单击的最常见和最有益的方法。这可能无法完全保护我们的数据，但会在一定程度上提供安全性。

要禁用页面上的右键单击，我们可以使用 JavaScript 的 HTML DOM addEventLIstener() 和 preventDefault() 方法。

在 JavaScript 中使用 HTML DOM `addEventListener()` 方法禁用对网页的右键单击

使用 addEventListener() 方法将事件处理程序附加到文档。

语法：

document.addEventListener(event, function, useCapture)

参数：

event：（必需）它指定字符串，即事件的名称。
function：（必需）当事件发生时，它指示要运行的函数。当事件发生时，事件对象作为第一个参数提供给函数。

定义的事件决定了事件对象的类型。例如，MouseEvent 对象代表 click 事件。
useCapture：（可选）它指定是否应该在捕获阶段或冒泡阶段执行事件的布尔值。
true：它指定事件应该在捕获阶段执行。
false：它指示事件在冒泡阶段运行。

在 JavaScript 中使用带有 `contextmenu` 事件的 `preventDefault()` 方法禁用对网页的右键单击

如果可以取消该事件，则此函数将取消该事件，从而禁用该事件的默认操作。例如，单击提交按钮将阻止提交表单。

语法：

event.preventDefault()

它不接受任何参数。

此示例将通过为 contextmenu 事件添加事件侦听器并调用 preventDefault() 方法来禁用右键单击。

这段代码的作用是防止弹出右键菜单。每当发生右键单击事件时，preventDefault() 函数会禁用右键单击。

由于使用 preventDefault() 函数禁用了 contextmenu 事件（这是发生右键单击时的默认功能）。

当我们右键单击时，此代码还会显示一条消息右键单击已禁用。

<html>
    <head>
        <title>
            Disable right click on my web page
        </title>
    </head>

    <body style = "text-align:center;">

        <h1 style = "color:blue;" >
            BLOCTAKSolutions
        </h1>

        <p id = "GFG_UP" style = "font-size: 20px; font-weight: italic;">
        </p>

        <button onclick = "gfg_Run()">
            Disable
        </button>

        <p id = "GFG_DOWN" style =
            "color:blue; font-size: 50px; font-weight: italic;">
        </p>

        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            el_up.innerHTML = " How to disable right click";

            function gfg_Run() {
                document.addEventListener('contextmenu',
                        event => event.preventDefault());
                el_down.innerHTML = "Right Click is disabled";
            }
        </script>
    </body>
</html>

单击禁用按钮之前的输出：

单击禁用按钮后的输出：

该程序的另一个示例是为 contextmenu 事件添加一个事件侦听器，并使用 preventDefault() 方法来禁用右键单击图像，因为我们并不总是希望用户保存图像。

<html>
    <head>
        <title>
            Disable right click on my web page
        </title>

        <style>
            img {
                border: 1px solid;
            }
        </style>
    </head>

    <body style = "text-align:center;">

        <h1 style = "color:blue;" >
            BLOCTAKSolutions
        </h1>

        <img src = ""/>

        <p id = "GFG_UP" style = "font-size: 20px; font-weight: italic;">
        </p>
        <button onclick = "gfg_Run()">
            Disable
        </button>
        <p id = "GFG_DOWN" style =
            "color: blue; font-size: 50px; font-weight: italic;">
        </p>

        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            el_up.innerHTML =
                "How to disable right click on image by button click using JavaScript";

            function gfg_Run() {
                document.addEventListener("contextmenu",

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

                el_down.innerHTML = "Right click is disabled on the image";
            }
        </script>
    </body>
</html>