Javascript17

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

  1. 1. 阻止选中
    1. 1.1. 使用 JS 阻止整个网页的内容被选中
    2. 1.2. 阻止特定区域的内容被选中
    3. 1.3. 使用 CSS 控制样式阻止内容被选中
  2. 2. 清除选中
    1. 2.1. 使用 JS 清除选中
    2. 2.2. 使用 CSS 清除选中
      1. 2.2.1. 参考链接

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

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

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

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

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

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

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

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

阻止选中

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

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

1
2
3
4
5
6
7
8
document.body.onselectstart = function () { 
    return false; 
};
// 或
document.body.onmousedown = function () { 
    return false; 
}

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

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

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

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

1
2
3
4
5
6
7
8
9
10
.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 清除选中

1
2
3
4
5
6
7
8
9
10
11
12
13
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