js与css阻止元素被选中及清除选中的方法总结

w8484855@qq.com · 发表于 2017-8-8 14:56:22

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本文和大家分享的主要是js与css阻止元素被选中及清除选中相关内容，一起来看看吧，希望对大家学习web前端http://www.maiziedu.com/course/web/有所帮助。

　　有时候，我们希望阻止用户选中我们指定区域的文字或内容。

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

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

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

登录/注册后可看大图

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

登录/注册后可看大图

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

　　.pretty-girl {

　　-webkit-user-select: none;

　　}

　　可是！可是！不是每个浏览器都可以不忧桑！！！那就只能请代码大王出山了。

　　阻止选中

　　有时候，我们需要禁止用户选中一些文本区域，这时候可以直接通过让 onselectstart 事件 return false 来实现。即在body标签中添加如下：

　　使用 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 的样式即可。

来源：SegmentFault

账号		自动登录	找回密码
密码			立即注册

js与css阻止元素被选中及清除选中的方法总结

马上注册，结交更多好友，享用更多功能^_^

版权声明