<!DOCTYPE html> <html> <body> <div unselectable="on" >unselectable=on </div> <br/> <div >-webkit-user-select:none;</div> <br/> <div >-moz-user-select:none;</div> <br/> <div onselectstart="return false;" >onselectstart="return false;"</div> </body> </html>
在各浏览器中效果如下:
注1:可以禁止内容选中。
注2:没有禁止内容选中。
可见,禁止内容选中的方法如下:
IE 给标签设置 unselectable= "on" ,设置标签方法 onselectstart="return false;"
Firefox 给标签设置私有样式 -moz-user-select:none 。
Chrome Safari 给标签设置私有样式 -webkit-user-select:none ,设置标签方法 onselectstart="return false;"。
Opera 给标签设置 unselectable= "on"
解决方案
给标签设置样式 -moz-user-select:none ;-webkit-user-select:none 同时标签设置 unselectable= "on" ,保证各浏览器都可以禁止内容选中。
如案例中给悬浮差弹出窗的标题栏设置禁止选中样式,可以这样设置:
<div unselectable= "on" > 登录 <a href="javascript:hidepopup();"></a> </div>
.popup_title{ -moz-user-select: none; /* Firefox all */ -webkit-user-select: none; /* Chrome all / Safari all /opera15+*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select:none; -o-user-select: none; /* 以上两个属性目前并未支持,写在这里为了减少风险 */ }