您的位置:首页 > 其它

阻止元素被选中及清除选中的方法

2015-01-06 13:29 281 查看
有时候,我们希望阻止用户选中我们指定区域的文字或内容。

举个栗子,有时候用户在一个区域执行频繁的点击操作,一不小心傲娇地点多了,就会选中当前区域的内容。

再举个栗子,制作轮播组件的时候,点击下一页,若点击的快的话,浏览器会识别为双击。

双击的默认效果是选中整片区域,这时候轮播图组件就会被表示忧郁的蓝色幕布盖住,多忧桑啊~



你看,这妹子多赞啊,可是你一紧张就乱点下一张的话,就变成酱紫了:



不过别怕,给这个现代化浏览器说好了咱不要这种忧桑色调就可以了:

.pretty-girl {
-webkit-user-select: none;
}

可是!可是!不是每个浏览器都可以不忧桑!!!那就只能请脚本大王出山了。

阻止选中

有时候,我们需要禁止用户选中一些文本区域,这时候可以直接通过让 onselectstart 事件 return false 来实现。

使用 JS 阻止整个网页的内容被选中

document.body.onselectstart = function () {
return false;
};

// 或
document.body.onmousedown = function () {
return false;
}

阻止特定区域的内容被选中

var elem = document.getElementById('elemId');
elem.onselectstart = function () {
return false;
};

使用 CSS 控制样式阻止内容被选中

仅支持非 IE10 以下的浏览器。IE9 以下请使用 onselectstart="return false;" 的方式来实现。

.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+。

需要注意的是,这个 user-select 还带浏览器厂商前缀,意味着她们还是非标准的,将来可能会改变。在生产环境中要慎用。

清除选中

有时候用户选中文字进行复制后,我们使用手动的方式进行选中的清除。

使用 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();
}
}

使用 CSS 清除选中

不考虑低版本 IE 的情况下,我们简单给选中元素添加以上 .unselect 的样式即可。

参考链接

MDN user-select
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: