关于禁止复制内容我们用得最多的应该就是user-select:none;这个属性了,
但是这个属性还不够完美,因为它不是所有浏览器都支持的属性,
像ie6,ie7,ie8,ie9都不支持这个属性,不过它在Chrome和Safari上能完美的支持。
这样,我们就需要做一些兼容了
首先使用 user-select:none;
如:.box{
-webkit-user-select:none;
-moz-user-select:none;
-o-user-select:none;
user-select:none;
}
但是这样还不够,因为ie6-9不兼容,所以还得加上标签属性 onselectstart="return false;" 来达到 user-select:none 的效果
用法:<body onselectstart="return false">
但是这样还是不够好,假如我只是想某一个部分不能复制,那么我们可以通过css的方式来解决,
如:.box{gn:expression_r(this.onselectstart=function(){return false;})}
这样针对IE浏览器的兼容就可以了,但是这样还是不够完美,因为还会有很多奇怪的原因导致某些浏览器不生效,
所以我们使用一个脚本来控制它,
<script type="text/javascript">
document.oncontextmenu=new Function('event.returnValue=false;');
document.onselectstart=new Function('event.returnValue=false;');
</script>
这样就可以控制了,但是这个脚本也是有缺点的,因为它不支持火狐浏览器,
所以我们在开发的时候需要把css属性、标签属性和js脚本都写上才能解决这些问题。