JavaScript简单实现弹出拖拽窗口(二)(2)

<!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>

在各浏览器中效果如下:

JavaScript简单实现弹出拖拽窗口(二)

注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; /* 以上两个属性目前并未支持,写在这里为了减少风险 */ }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzsfxj.html