JavaScript 实现网页内容防复制的四种常用方案
本文汇总了JavaScript实现禁止网页内容复制的四种方法。包括通过jQuery绑定contextmenu、copy和selectstart事件禁用右键及选中;拦截Ctrl+C/V快捷键;利用CSS3的user-select属性及其浏览器前缀禁止文本选择;以及针对禁用JavaScript后的CSS兜底方案。
JavaScript事件监听与快捷键拦截方案
第一种方法是通过JavaScript监听相关事件来阻止用户操作。具体实现中,可以使用jQuery的bind方法,将contextmenu(右键菜单)、copy(复制)和selectstart(选择开始)事件统一绑定到document对象上。当这些事件触发时,函数返回false,从而禁止默认行为,达到禁用右键菜单和复制功能的目的。
// 禁用右键菜单、复制、选择
$(document).bind("contextmenu copy selectstart", function() {
return false;
});
第二种方法侧重于键盘快捷键的拦截。通过监听document的keydown事件,检查用户是否同时按下了Ctrl键以及代表全选(keyCode 65)或复制(keyCode 67)的按键。如果条件满足,则返回false以阻止默认的复制行为。这种方法的优势在于兼容所有主流浏览器。
// 禁用Ctrl+C和Ctrl+V(所有浏览器均支持)
$(document).keydown(function(e) {
if(e.ctrlKey && (e.keyCode == 65 || e.keyCode == 67)) {
return false;
}
});
CSS user-select属性防复制实现
第三种方法是通过JavaScript动态修改DOM元素的CSS样式来实现防复制。在页面加载完成后,获取body元素,并为其设置user-select属性为none。为了兼容不同内核的浏览器,需要分别设置-moz-user-select(Firefox)、-webkit-user-select(WebKit内核)、-ms-user-select(IE10+)、-khtml-user-select(KHTML内核)和-o-user-select(Opera)等私有前缀属性。注意,如果直接使用了CSS样式定义,则无需此段JS代码。
// 设置CSS禁止选择(如果写了下面的CSS则不需要这一段代码,新版浏览器支持)
$(function() {
$("body").css({
"-moz-user-select":"none",
"-webkit-user-select":"none",
"-ms-user-select":"none",
"-khtml-user-select":"none",
"-o-user-select":"none",
"user-select":"none"
});
});
第四种方法是纯CSS实现,旨在防止用户在禁用JavaScript的情况下仍能复制内容。该方案在CSS中定义body的user-select属性为none,并包含上述各浏览器的私有前缀。随着新版浏览器对CSS3标准的支持,这种方法逐渐成为主流且稳定的防复制标准方案,无需依赖JavaScript脚本即可生效。
body {
-moz-user-select:none; /* Firefox私有属性 */
-webkit-user-select:none; /* WebKit内核私有属性 */
-ms-user-select:none; /* IE私有属性(IE10及以后) */
-khtml-user-select:none; /* KHTML内核私有属性 */
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
}
JavaScript将图片转换为Base64编码的两种途径
2026-11-05 16:43:05
怎么在 Vue 或 React 项目中正确集成 animate.js
2026-11-05 10:23:38
JS注册事件:addEventListener基础语法与参数详解
2026-11-05 08:44:56
JSP和JS的区别:运行环境与服务端/客户端职责解析
2026-11-04 23:34:36
pdf.js 官方下载地址:GitHub Release 获取预编译包
2026-11-04 23:07:27
