xiaohelikesleep · blog

Appearance

浏览器DOM操作基础：禁用右键菜单与阻止文字选中 ​

禁用右键菜单 ​

在Web页面中，用户可以通过点击鼠标右键来调出浏览器的上下文菜单（右键菜单），这里可以包含多种选项，如“复制”、“粘贴”、“另存为”等。在某些情况下，出于版权保护、防止内容盗用或避免不当操作的考虑，开发者可能希望禁用这个菜单。

要禁用右键菜单，我们可以通过监听contextmenu事件，并使用preventDefault()方法来阻止其默认行为。以下是一个简单的代码示例：

javascript
document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
});

当用户尝试在页面上点击右键时，这个事件监听器会被触发，随后preventDefault()方法会阻止浏览器显示默认的右键菜单。

阻止文字选中 ​

同样地，用户可以通过鼠标拖动来选中页面上的文字，这可能会导致内容被复制或不小心被拖动到其他位置。如果开发者希望防止这种情况发生，可以通过监听selectstart事件来实现。

selectstart事件在用户开始选中文本时触发。通过在事件监听器中调用preventDefault()方法，我们可以阻止文本被选中。以下是相应的代码示例：

javascript
document.addEventListener('selectstart', function (e) {
    e.preventDefault();
});

这样，无论用户如何尝试，都无法在页面上选中任何文字。

代码示例 ​

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>洛可可白-禁用右键菜单与阻止文字选中</title>
</head>

<body>
    禁用右键菜单与阻止文字选中
    <script>
        // 1. contextmenu 禁用右键菜单
        document.addEventListener('contextmenu', function (e) {
            e.preventDefault();
        })
        // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function (e) {
            e.preventDefault();
        })
    </script>
</body>

</html>

应用场景 ​

  • 版权保护：对于包含原创内容或版权材料的网站，禁用右键菜单和阻止文字选中可以作为一种基本的保护措施，防止用户轻易复制内容。
  • 用户体验：在某些应用或游戏中，可能不希望用户与页面交互的方式受到限制，因此禁用这些功能可以提供更流畅的用户体验。
  • 防止误操作：在触摸板或触摸屏设备上，用户有时会无意中选中文字或触发右键菜单，禁用这些功能可以减少误操作的可能性。