Javascript自定义页面复制事件
Javascript自定义页面复制事件 – WhiteNight's Site
2023年10月13日
文章访问量：90
标签：Javascript
监听copy事件以达到自定义页面复制功能的效果。
写者注
需要注意的是，浏览器的部分拓展插件（如迅雷）会导致本文的代码报错。不过该报错不影响功能，而且只有在f12开发者控制台才能看见。不过如果觉得看着报错不顺眼的话，关闭导致你报错的拓展即可（自己一个一个试）。
什么是copy事件
用户的复制事件
当用户尝试在页面上复制某些内容时，就会触发copy事件。而通过监听copy事件，我们就可以自定义用户在页面上的复制的内容。比如当用户尝试复制时，出现弹窗或跳转页面（如百度文库）；又或者是在用户复制的内容后加上copyright内容（如csdn）。
示例：禁止用户复制，并添加弹窗或跳转页面
代码和效果示例
先放一个能自由输入和复制的文本框在这里，方便调试。
测试文本:
先来实现禁止用户复制的逻辑。这里先放例子。可以试着复制下列文本，再粘贴到上方的文本框中，看看能不能复制成功。
-> 你不能复制该内容 <-
-> 你可以复制该内容 <-
写者注
样式实在不想改，琢磨css样式的话一琢磨就是一整天。还是先把文章完成再说。
上面这段代码实现了对<p>段落标签的监听，当用户尝试复制该内容时，阻止默认的复制事件，并实现你自定义的事件。这里自定义的是修改用户剪贴板的内容，并在浏览器中显示一个警告的弹窗。以下是代码（除去了css）
<div class="copypanel"><p id="content">-> 你不能复制该内容 <-</p><p id="content2">-> 你可以复制该内容 <-</p>
</div><script>content.addEventListener('copy',(e)=>{e.preventDefault();e.clipboardData.setData('text/plain','复制失败！');alert("不准复制！！！")})
</script>那跳转页面也不难实现，直接给实现效果和代码吧。现在当你尝试复制相关内容时，会自动打开我的网站首页。
-> 你不能复制该内容 <-
-> 你可以复制该内容 <-
<div class="copypanel2"><p id="content3">-> 你不能复制该内容 <-</p><p id="content4">-> 你可以复制该内容 <-</p>
</div><script>content3.addEventListener('copy',(e)=>{e.preventDefault();window.open("https://white-night.club"); })
</script>写者注
由于wordpress中自定义html区块就是直接把相关代码直接插入进当前html的一个div容器中，所以如果不指定要监听的元素，会导致当前页面的所有内容都无法访问。想监听当前页面所有dom的话把content换成document.addEventListener即可。