前端禁用 页面复制粘贴

1、实现禁用 copy 事件的代码

java 复制代码
document.addEventListener('copy', function (event) {
    event.preventDefault(); // 阻止默认的复制行为
    alert(`复制功能已被禁用,无法复制此页面的内容。`);
});

事件监听器的工作原理

为了更好地理解这段代码的原理,我们可以更深入地分析 addEventListener() 的工作机制。

addEventListener() 方法允许我们为指定的事件类型添加一个监听器。这里,我们为 copy 事件添加了监听器,这意味着当用户尝试执行复制操作时,这个函数会被调用。

event.preventDefault() 是关键的部分,它告诉浏览器不要执行 copy 事件的默认行为。由于浏览器的默认行为是将选定的文本内容复制到剪贴板,所以 preventDefault() 可以阻止这一过程。

这种方法不仅可以应用于整个文档,也可以应用于特定的元素。如果我们只希望禁用某些特定部分的复制功能,而不是整个页面的内容,那么可以为特定元素添加 copy 事件监听器。例如:

java 复制代码
const protectedElement = document.getElementById('protected-content');
protectedElement.addEventListener('copy', function (event) {
    event.preventDefault();
    alert(`此内容受保护,无法复制。`);
});

2、增强版 (禁用右键菜单)

java 复制代码
document.addEventListener('contextmenu', function (event) {
    event.preventDefault();
    alert(`右键菜单已禁用。`);
});

3、示例

java 复制代码
document.addEventListener('copy', function (event) {
    event.preventDefault();
    alert(`复制功能已被禁用,无法复制此页面的内容。如需获得内容,请联系我们。`);
});

document.addEventListener('contextmenu', function (event) {
    event.preventDefault();
    alert(`右键菜单已被禁用,感谢您的理解。`);
});

// 提供替代的解决方案
document.querySelector('#request-content').addEventListener('click', function () {
    alert(`您可以通过填写申请表来获得此内容的复制权限。`);
});
相关推荐
brzhang17 分钟前
代码即图表:dbdiagram.io让数据库建模变得简单高效
前端·后端·架构
三巧28 分钟前
纯CSS吃豆人(JS仅控制进度)
javascript·css·html
SummerGao.29 分钟前
【解决】layui layer的提示框,弹出框一闪而过的问题
前端·layui
软件技术NINI1 小时前
html css js网页制作成品——HTML+CSS+js美甲店网页设计(5页)附源码
javascript·css·html
天天扭码1 小时前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试
拉不动的猪1 小时前
前端开发中常见的数据结构优化问题
前端·javascript·面试
街尾杂货店&1 小时前
css word
前端·css
Мартин.1 小时前
[Meachines] [Hard] CrimeStoppers LFI+ZIP-Shell+Firefox-Dec+DLINK+rootme-0.5
前端·firefox
冰镇生鲜1 小时前
快速静态界面 MDC规则约束 示范
前端
技术与健康1 小时前
【解读】Chrome 浏览器实验性功能全景
前端·chrome