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

有時候，咱們但願阻止用戶選中咱們指定區域的文字或內容。

舉個栗子，有時候用戶在一個區域執行頻繁的點擊操做，一不當心傲嬌地點多了，就會選中當前區域的內容。

再舉個栗子，製做輪播組件的時候，點擊下一頁，若點擊的快的話，瀏覽器會識別爲雙擊。

雙擊的默認效果是選中整片區域，這時候輪播圖組件就會被表示憂鬱的藍色幕布蓋住，多憂桑啊~

你看，這妹子多贊啊，但是你一緊張就亂點下一張的話，就變成醬紫了：

不過別怕，給這個現代化瀏覽器說好了咱不要這種憂桑色調就能夠了：

.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