1.双击图片click事件切换过程中发生选中图片的现象
2.双击向右切换按钮click事件过程中发生选中图片的现象
IE10+实现方式──CSS3
.unselect {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
/* 以下两个属性目前并未支持,写在这里为了减少风险 */
-o-user-select: none;
user-select: none;
}
- user-select: auto; => 用户可以选中元素中的内容
- user-select: none; => 用户不可选中元素中的内容
- user-select: text; => 用户可以选中元素中的文字
- 目前这个 user-select 兼容 Chrome 6+、Firefox、IE 10+、Opera 15+、Safari 3.1+。
IE5.5~9的实现──unselectable属性
<span unselectable="on"></span>
由于unselectable属性不具有继承性,所以要遍历所有子元素并为各子元素添加该属性才有效。
// 将元素及其后代元素均设置为不可选择
var unselectable = function(root){
root.setAttribute('unselectable', 'on');
var descendant = root.getElementsByTagName("*");
var rTagName = /input|iframe|textarea|select/i;
for (var i = 0, el; el = descendant[i++];){
if (!rTagName.test(el.tagName)){
el.setAttribute('unselectable', 'on');
}
}
};
注意: 1. 若模板中包含</xmp>标签会造成标签结束符混乱的问题,因此通过该方式存放模板时,不能包含</xmp>结束标签; 2. xmp元素必须作为body的子孙元素。 由于模板文本中出现<script>标签的情况较少,而出现表单元素<textarea>标签的几率较大,而xmp标签已被废弃,因此还是通过script标签存放模板文本的方式较为常见。