如何解除知识星球选择内容及复制限制
微wx笑
2025-05-09【前端开发】
11
0
0关键字：
知识星球
如何解除知识星球选择内容及复制限制？注意，本文内容仅作为技术探讨学习！这里有一篇：解除知识星球复制限制（解决知识星球不能复制文本）https://blog.csdn.net/dzdzdzd12347/article
如何解除知识星球选择内容及复制限制？
注意，本文内容仅作为技术探讨学习！
这里有一篇：
解除知识星球复制限制（解决知识星球不能复制文本）
https://blog.csdn.net/dzdzdzd12347/article/details/126674619
是一个 Tampermonkey 用户脚本，作用是解除知识星球网页上的文本复制限制，并对带有特定属性或类名的元素进行样式修改。
这种实现方式同时跑三个计时器，不如监听copy事件的方式好；
而且解除限制，复制的内容也要粘贴到Markdown编辑器才能更好的保留格式，但是还有一些HTML标签需要处理；
个人觉得比较好的方式是通过Chrome扩展程序的方式实现这一功能，把所有的操作都封装在扩展程序中；
1、通过注入CSS样式，解决不能选择内容的限制
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //inject_zsxq.js//知识星球(function() { if (document.location.href.indexOf('https://wx.zsxq.com') === 0){ // 创建一个 style 元素 const style = document.createElement('style'); // 设置 CSS 内容 style.textContent = ` .topic-container[_ngcontent-ng-c3736389963] .disabled-copy[_ngcontent-ng-c3736389963] { -webkit-user-select: auto !important; user-select: auto !important; } `; // 将 style 元素添加到 head 中 document.head.appendChild(style); }})(); |
2、通过监听oncopy事件，解决复制限制
这里只提供一个思路
关键点：addEventListener 的第三个参数
document.addEventListener('copy', onCopy,true);
详细实现
略。。。
document.addEventListener('copy', onCopy,true);
document.addEventListener('copy', async () => {});
这两种方式的执行顺序有什么区别？
在JavaScript里，事件监听器的执行顺序和事件流阶段、注册方式都有关系。就你给出的这两种监听copy事件的方式，它们的执行顺序差异如下：
事件流阶段不同
捕获阶段触发的监听器
1 | document.addEventListener('copy', onCopy, true); |
这行代码注册的监听器会在事件捕获阶段执行。事件捕获指的是事件从文档根节点开始，逐步向下传递到目标元素的过程。
冒泡阶段触发的监听器
1 | document.addEventListener('copy', async () => {}, false); // 第三个参数默认是false |
此监听器会在事件冒泡阶段执行。事件冒泡是事件从目标元素开始，向上传递到文档根节点的过程。
执行顺序情况
当同时存在捕获阶段和冒泡阶段的监听器时，事件会先进入捕获阶段。所以，
document上捕获阶段的监听器（第三个参数为true）会比冒泡阶段的监听器先执行。也就是说，在你的代码里，
onCopy函数会比那个异步箭头函数更早执行。
示例说明
下面的代码示例能帮助你更直观地理解：
1 2 3 4 5 6 7 8 9 | // 捕获阶段的监听器（先执行）document.addEventListener('copy', () => { console.log('捕获阶段监听器执行');}, true);// 冒泡阶段的监听器（后执行）document.addEventListener('copy', () => { console.log('冒泡阶段监听器执行');}); |
当你触发复制操作时，控制台会先输出“捕获阶段监听器执行”，接着输出“冒泡阶段监听器执行”。
总结
这两种监听方式的主要区别在于事件流阶段不同，而不是同步和异步的差异。捕获阶段的监听器会比冒泡阶段的监听器先执行。在实际开发中，你可以根据业务需求来选择使用捕获阶段还是冒泡阶段的监听器。
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/front/2025-05-09/2067.html
下一篇：返回列表
