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

在本文中，我们将看到如何使用JavaScript禁用页面上的右键鼠标按钮。所使用的方法如下：

HTML DOM addEventListener() 方法： 此方法将事件处理程序附加到文档。

语法：

document.addEventListener(event, function, useCapture)

参数:

event： 它是一个必需的参数。它指定事件的名称的字符串。
function： 它是一个必需的参数。它指定当事件发生时要运行的函数。当事件发生时，事件对象作为第一个参数传递给函数。事件对象的类型取决于定义的事件。例如，“click”事件是MouseEvent对象。
useCapture： 它是一个可选参数。它指定布尔值，确定事件是否应该在捕获阶段或冒泡阶段执行。
- true： 它指定事件应该在捕获阶段执行。
- false： 它指定事件应该在冒泡阶段执行。

JavaScript preventDefault() 事件方法 ：如果可以取消事件，该方法将取消事件，即停止事件的默认操作。例如- 点击“提交”按钮，阻止其提交表单。

语法：

event.preventDefault()

参数： 它不接受任何参数。

示例1： 通过添加一个事件监听器来禁用右键点击，监听器监听 “contextmenu”事件 并调用 preventDefault()方法 。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to disable right click on 
        web page using JavaScript ?
    </title>
</head>
 
<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <h3>
        How to disable right click on 
        web page using JavaScript ?
    </h3>
 
    <button onclick="Fun_call()">
        Disable Right Click
    </button>
 
    <h3 id="GFG" style="color:green;">
    </h3>
 
    <script>
        let elm = document.getElementById("GFG");
 
        function Fun_call() {
            document.addEventListener('contextmenu',
                event => event.preventDefault());
 
            elm.innerHTML = "Right click disabled";
        }        
    </script>
</body>
 
</html>

输出：

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

示例2： 本示例通过添加事件监听器以捕捉 “contextmenu”事件 并调用 preventDefault()方法 来禁用图像的右键单击。由于有时我们不希望用户保存图像。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to disable right click on
        web page using JavaScript ?
    </title>
</head>
 
<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <h3>
        How to disable right click on
        web page using JavaScript ?
    </h3>
 
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190521140445/gfglogo2.png" />
    <br><br>
 
    <button onclick="Fun_call()">
        Disable Right Click
    </button>
 
    <h3 id="GFG" style="color:green;">
    </h3>
 
    <script>
        let elm = document.getElementById("GFG");
 
        function Fun_call() {
            document.addEventListener("contextmenu",
 
                function (e) {
                    if (e.target.nodeName === "IMG") {
                        e.preventDefault();
                    }
                }, false);
 
            elm.innerHTML = "Right click disabled on image";
        }       
    </script>
</body>
 
</html>

输出：

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