在JavaScript中,常用的编辑事件有3种。

oncopy onselectstart oncontextmenu

一、oncopy

在JavaScript中,我们可以使用oncopy事件来防止页面内容被复制。

语法:

document.body.oncopy = function () { return false; }

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { document.body.oncopy = function () { return false; } } </script> </head> <body> <div>不要用战术上的勤奋,来掩盖战略上的懒惰。</div> </body> </html>

浏览器预览效果如图所示。

分析:

大家可能会问:选取文本后点击鼠标右键,发现还是可以用【复制】这个选项啊!其实就算你可以用,点击【复制】选项后再粘贴,会发现粘贴不出内容来的。

二、onselectstart

在JavaScript中,我们可以使用onselectstart事件来防止页面内容被选取。

语法:

document.body.onselectstart=function() { return false; }

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { document.body.onselectstart = function () { return false; } } </script> </head> <body> <div>成功的人总喜欢神化自己,为的是让其他人觉得成功很难。</div> </body> </html>

浏览器预览效果如图所示。

分析:

防止页面内容被选取,从本质上来说也是为了防止用户复制内容。也就是说,为了防止用户复制内容,我们有两种实现方式:oncopy事件和onselectstart事件。

三、oncontextmenu

在JavaScript中,我们可以使用oncontextmenu事件来禁止鼠标右键。

语法:

document.oncontextmenu = function () { return false; }

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { document.oncontextmenu = function () { return false; } } </script> </head> <body> <div>每个人的人生掌握在自己的手里,而不是别人的评价里。</div> </body> </html>

浏览器预览效果如图所示。

分析:

虽然鼠标右键功能被禁止了,但是我们依旧可以用快捷键,如使用ctrl+c快捷键来复制内容;使用ctrl+s快捷键来保存网页等。

总的来说,oncopy、onselectstart、oncontextmenu这3个在大多数情况下都是用来保护版权的。不过为了更好的用户体验,我们还是少用为妙,除非是迫不得已的情况。