有时候,我们希望阻止用户选中我们指定区域的文字或内容。
有时候用户在一个区域执行频繁的点击操作,一不小心傲娇地点多了,就会选中当前区域的内容。
制作轮播组件的时候,点击下一页,若点击的快的话,浏览器会识别为双击。
双击的默认效果是选中整片区域,这时候轮播图组件就会被表示忧郁的蓝色幕布盖住,
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
<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'); } } };
document.body.onselectstart = function () {
return false;
};
// 或
document.body.onmousedown = function () {
return false;
}
阻止特定区域的内容被选中
var elem = document.getElementById('elemId');
elem.onselectstart = function () {
return false;
};
使用 JS 清除选中
function clearSelections () {
if (window.getSelector) {
// 获取选中
var selection = window.getSelection();
// 清除选中
selection.removeAllRanges();
} else if (document.selection && document.selection.empty) {
// 兼容 IE8 以下,但 IE9+ 以上同样可用
document.selection.empty();
// 或使用 clear() 方法
// document.selection.clear();
}
}