//同样的写法：lettest1=document.querySelector('#test1');test1.oncopy=e=>{//监听test1发生对复制事件做一些处理//test1发生的复制事件会触发回调，其他地方不会触发回调}其他同理事件，这里就不赘述了。clipboardData对象：用于访问和修改剪贴板中的数据。兼容性：不同的浏览器有不同的对象：在IE中，这个对象是window对象的属性，而在Chrome、Safari和Firefox中，这个对象是对应的事件对象属性。所以我们在使用的时候需要做如下兼容：document.body.oncopy=e=>{letclipboardData=(e.clipboardData||window.clipboardData);//getclipboardDataobject+dosomething}objectmethod:object共有三个方法：getData(),setData(),clearData()getData()访问剪贴板中的数据参数：getData()接受一个'text'参数，这是要获取的数据的格式。复制、剪切、粘贴触发的事件数据：其实在chorme上测试时，只有在粘贴粘贴时才可以使用getData()访问数据。用法如下：要粘贴的数据：document.body.onpaste=e=>{letclipboardData=(e.clipboardData||window.clipboardData);//兼容处理console.log('待粘贴数据',clipboardData.getData('text'));}Copyed/cutdata:inCopyedandcutting中的数据需要通过window.getSelection(0).toString()访问：document.body.oncopy=e=>{console.log('Copieddata:',window.getSelection(0).toString());}setData()：修改剪贴板中的数据参数：第一个参数也是'text'，第二个参数是要放入剪贴板的文本。剩下的就留在下面模仿知乎/掘金复制一大段文字，加上版权信息。clearData()：我对这个方法了解不多。试了很久不知道怎么用（有知道的可以在评论区指出）。如果只是禁止复制或粘贴，下面还有其他方法可以做到，细粒度操作即可。应用：如果学习不是为了装X，那么一切都将毫无意义。看看这个东西可以用在哪些场景下：实现知乎/掘金类复制一大段文字添加版权信息：实现很简单：取消默认复制后，主要是在复制的内容后面添加信息，然后根据clipboardData的setData()方法将信息写入剪贴板。大家可以直接将这段代码复制到本地试试。//这里的掘金不是全局监听，应该只在文章的dom范围内监听。document.body.oncopy=event=>{event.preventDefault();//取消默认的复制事件lettextFont,copyFont=window.getSelection(0).toString();//复制的文字稍后插入//反知识掘金复制一两个字，不加版权信息if(copyFont.length>10){textFont=copyFont+'\n'+'作者：OBKoro1\n'+'链接：https://juejin.im/user/58714f0eb123db4a2eb95372/posts\n'+'来源：掘金\n'+'版权归作者所有。商业转载请联系作者授权，非商业转载请注明出处。';}else{textFont=copyFont;//如果不超过十个字符，将使用复制的内容。}if(event.clipboardData){returnevent.clipboardData.setData('text',textFont);//将信息写入剪贴板}else{//兼容IEreturnwindow.clipboardData.setData("text",textFont);}}然后command+c，command+v，输出：你复制的内容作者：OBKoro1链接：https://juejin.im/user/58714f0eb123db4a2eb95372/posts来源：掘金版权归作者所有。商业转载请联系作者授权，非商业转载请注明出处。实现七七点网的反复制功能：禁止复制+剪切，禁止右键单击，右键的一些选项：全选，复制，粘贴等。文本选择禁用，可以选择不能复制，体验很差。user-select禁用css的文本选择。可以复制代码在本地播放：//禁止右键菜单document.body.oncontextmenu=e=>{console.log(e,'right-click');返回假；//e.preventDefault();};//禁用文本选择。document.body.onselectstart=e=>{console.log(e,'文本选择');返回假；//e.preventDefault();};//禁止复制document.body.oncopy=e=>{console.log(e,'copy');返回假；//e.preventDefault();}//禁止切割document.body.oncut=e=>{console.log(e,'cut');返回假；//e.preventDefault();};//禁用粘贴document.body.onpaste=e=>{console.log(e,'paste');返回假；//e.preventDefault();};//css禁用文本选择所以它不会触发jsbody{user-select:none;-moz-用户选择：无；-webkit-用户选择：无；-ms-用户选择：无；}PS：使用e.preventDefault()也可以禁用，但是建议使用returnfalse这样就不需要访问e和e的方法了。示例中全局禁用document.body，也可以禁用dom（某些区域）。破解防复制：上面的防复制方法是通过js+css实现的，所以思路是：禁用js+取消用户选择样式。Chrome浏览器：打开浏览器控制台，按F1进入设置，勾选禁用JavaScript（禁止js）。如果此时不能复制，就得找到user-selectstyle，取消这个style。所以那些盗版小说都是手打的，我真的看不懂，请问？？？点击复制功能：不能使用clipboardData：在IE中，可以用window.clipboardData.setData('text','content')实现。上面说了clipboardData是IE中window的一个属性。其他浏览器都是对应事件对象的属性，这其实是一种防止未授权访问的安全措施。为了兼容其他浏览器，我们不能通过clipboardData来实现这个操作。具体方法：创建一个隐藏的输入框点击时，将要复制的内容放入输入框，选择文本内容input.select()这里只能使用input或者textarea来选择文本。document.execCommand("copy")，执行浏览器的复制命令。函数copyText(){vartext=document.getElementById("text").innerText;//也可以传入要复制的内容varinput=document.getElementById("input");//获取隐藏input的dominput.value=text;//修改文本框内容input.select();//选择文本document.execCommand("copy");//执行浏览器复制命令alert("Copysuccessful");}点击复制内容demo在这里，可以点击查看。结束语工作之余了解一下这些东西还是很有趣的，也可以增长自己的见识。其实我们只要监听这些事件，就可以对要剪切的内容进行各种操作，比如：复制时替换文本，粘贴时检查图片（上传图片），或者调整文本的长度切等等，只限各位希望看完的朋友可以点赞/关注，你们的支持就是对我最大的鼓励。个人博客和掘金个人主页，如需转载，请放上原文链接并署名。码字不易，谢谢支持！如果您喜欢本文，请关注我的订阅号，漫漫科技之路，期待以后一起学习成长。以上2018.8.8参考资料：js提升14.2.2如何操作网页剪贴板禁止复制粘贴以及如何破解原生js点击按钮复制文字