如何使用 JavaScript/jQuery 禁用右键单击
要禁用页面上的右键单击，我们需要在事件处理程序中添加 oncontextmenu 事件和“返回 false”。
它将阻止通过鼠标右键单击对上下文菜单的所有访问。
例子
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
<h2>Copy and cut disabled</h2>
<p>I am a text and you cannot copy or cut me.</p>
<script>
$(document).ready(function() {
$('body').bind('cut copy', function(e) {
e.preventDefault();
});
});
</script>
</body>
</html>
使用 jQuery 函数 bind() 禁用右键单击功能。
此方法禁用文本字段上的右键单击（上下文菜单）功能，并通过弹出消息提醒用户。
例子
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
<h2>Right-click disabled</h2>
<p>For this page the right-click is disabled.</p>
<script>
$(document).ready(function() {
$("body").on("contextmenu", function(e) {
return false;
});
});
</script>
</body>
</html>
请记住，不可能以任何方式阻止文档中的文本提取（100% 安全），因为有多种方法可以检索内容，即浏览器开发人员控制台。
如何使用 JavaScript 禁用文本选择
将 onmousedown 和 onselectstart 事件应用于 <body> 或者 <div> 标签，以防止在上进行文本选择和复制/剪切。
它覆盖浏览器的默认行为。
例子
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body onmousedown="return false" onselectstart="return false">
<h2>Unselectable text</h2>
<p>经历过风雨，才懂得阳光的温暖。 生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
</body>
</html>
如何使用 JavaScript/jQuery 禁用复制、剪切和粘贴。
我们可以允许文本选择，但使用 oncopy、oncut 和 onpaste 事件属性阻止复制和剪切功能。
通过将这些属性添加到文本框的 <input> 标签中，我们可以禁用剪切、复制和粘贴功能。
用户可以选择手动输入设置了这些属性的字段。
例子
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<h2>Copy, cut and paste disabled</h2>
<input type="text" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off/>
<br>
</body>
</html>
通过使用 jQuery bind() 函数指定用户剪切或者复制文本时触发的剪切和复制事件，可以实现相同的效果。
例子
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
<h2>Copy and cut disabled</h2>
<p>I am a text and you cannot copy or cut me.</p>
<script>
$(document).ready(function() {
$('body').bind('cut copy', function(e) {
e.preventDefault();
});
});
</script>
</body>
</html>
如何使用 CSS 禁用文本选择突出显示
使文本不可选择并不是一项艰巨的任务。
我们需要做的就是禁用可能加载网页的所有浏览器的文本选择性。
让我们看看不同浏览器使用哪些扩展来禁用文本的选择性。
- Chrome、Opera（旧版本）、IOS Safari：-webkit-user-select
- Safari：-webkit-touch-callout
- Mozilla：-moz-user-select
- KHTML 浏览器 (Konqueror)：-khtml-user-select
Chrome 从 54.0 版本开始，Opera 从 41.0 版本开始支持 user-select 不带 -webkit- 前缀。
例子
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.unselectable {
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #cc0000;
}
</style>
</head>
<body>
<p>可以选择的文本</p>
<div class="unselectable">无法选择的文本</div>
</body>
</html>
如果我们需要禁用整个页面的文本选择，请将用户选择应用于 <body> 元素。
在某些情况下，阻止选择网页的某些部分可能是有利可图的。
因为禁用用户选择非常烦人，所以最好不要为整个设置它。
相反，请禁用我们担心可能被盗的部分或者特定文章的文本选择。
在可以增强用户体验的情况下使用它。
无论在上禁用用户选择的原因是什么，如果我们已经到了那一步，那么这里就是学习如何使用 CSS、Javascript 和 jQuery 轻松实现这一点的正确地方。