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

最新推荐文章于 2024-09-21 11:23:29 发布

洛可可白

最新推荐文章于 2024-09-21 11:23:29 发布

阅读量1.8k

点赞数 34

分类专栏：前端专栏文章标签： html5 javascript web

本文链接：https://blog.csdn.net/interest_ing_/article/details/136955875

版权

前端专栏专栏收录该内容

58 篇文章 8 订阅

订阅专栏

本文介绍了如何使用JavaScript在Web开发中禁用右键菜单和阻止文字选中，以保护内容和提供定制化体验。通过监听contextmenu和selectstart事件，给出代码示例和应用场景，同时提醒注意安全措施的局限性。

摘要由CSDN通过智能技术生成

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

🤖 洛可可白：个人主页

🔥 个人专栏：✅前端技术 ✅后端技术

🏠 个人博客：洛可可白博客

🐱 代码获取：bestwishes0203

📷 封面壁纸：洛可可白wallpaper

在这里插入图片描述

文章目录

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

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

在Web开发中，有时我们需要对用户的默认行为进行限制，以保护网站内容或提供更定制化的用户体验。两个常见的例子是禁止用户通过右键菜单访问上下文选项，以及阻止用户选中页面上的文字。本文将介绍如何使用JavaScript来实现这两个功能，以及它们背后的原理和可能的应用场景。

体验地址

洛可可白：

禁用右键菜单与阻止文字选中

禁用右键菜单

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

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

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

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

阻止文字选中

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

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

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

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

代码示例

<!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>