当前位置：首页 > article >正文

前端禁用页面复制粘贴

article 2024/12/4 4:47:49

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

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

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

addEventListener() 方法允许我们为指定的事件类型添加一个监听器。这里，我们为 copy 事件添加了监听器，这意味着当用户尝试执行复制操作时，这个函数会被调用。
event.preventDefault() 是关键的部分，它告诉浏览器不要执行 copy 事件的默认行为。由于浏览器的默认行为是将选定的文本内容复制到剪贴板，所以 preventDefault() 可以阻止这一过程。
这种方法不仅可以应用于整个文档，也可以应用于特定的元素。如果我们只希望禁用某些特定部分的复制功能，而不是整个页面的内容，那么可以为特定元素添加 copy 事件监听器。例如：

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

2、增强版（禁用右键菜单）

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

3、示例

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

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

// 提供替代的解决方案
document.querySelector('#request-content').addEventListener('click', function () {
    alert(`您可以通过填写申请表来获得此内容的复制权限。`);
});