网页中禁用右键复制功能
- 2018-12-13 17:48:00
- 小熊 原创
- 11419
有时候，我们看到优秀文章、素材，忍不住就想复制一下并占为己有。但是往往事与愿违，我们常常发现怎么都无法使用鼠标右键。这篇文章教你来揭开这神秘面纱。
百度文库、豆瓣等这些专业在线互动式文档分享平台就不说了，鼓励大家原创、分享嘛，也尊重大家知识产权。然后常规的网页不能复制，无非是禁用了鼠标右键功能。
鼠标右键的禁用，有两种方式：
CSS禁用法。
Javascript禁用法。
一.CSS法禁用右键选中
user-select：none |text| all | element
默认值：text
适用于：除替换元素外的所有元素
继承性：无
动画性：否
计算值：指定值
取值：
none：文本不能被选择
text：可以选择文本
all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
element：可以选择文本，但选择范围受元素边界的约束。
说明：
设置或检索是否允许用户选中文本。
IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果；Safari和Chrome也支持该标签属性；直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none 的效果；unselectable 的另一个值是 off；除Chrome和Safari外，在其它浏览器中，如果将文本设置为 -ms-user-select:none;，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本；对应的脚本特性为userSelect。
例子：
.box
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<div class="box" onselectstart="return false;" unselectable="on">
这是测试数据
</div>
二.Javascript法
1.方法一
<script language="Javascript">
document.oncontextmenu=new Function("event.returnValue=false");
document.onselectstart=new Function("event.returnValue=false");
</script>
2.方法二
<body oncontextmenu="event.returnValue=false" onselectstart="event.returnValue=false">
3.另外，也可以使用event.preventDefault() 方法来阻止oncontextmenu() 还有onselectstart()。
document.oncontextmenu=function(evt){
evt.preventDefault();
}
document.onselectstart=function(evt){
evt.preventDefault();
};
| 联系人： | 小熊 |
|---|---|
| 电话： | 18037578880 |
| Email： | admin@cnsite.org |
| QQ： | 929410000 |
| 微信： | itseor |
| 微博： | itseoer |
| 网址： | www.beatmoon.com |
