有時候，我們希望阻止用戶選中我們指定區域的文字或內容。
舉個栗子，有時候用戶在一個區域執行頻繁的點擊操作，一不小心傲嬌地點多了，就會選中當前區域的內容。
再舉個栗子，制作輪播組件的時候，點擊下一頁，若點擊的快的話，瀏覽器會識別為雙擊。
雙擊的默認效果是選中整片區域，這時候輪播圖組件就會被表示憂郁的藍色幕布蓋住，多憂桑啊~
你看，這妹子多贊啊，可是你一緊張就亂點下一張的話，就變成醬紫了：
不過別怕，給這個現代化瀏覽器說好了咱不要這種憂桑色調就可以了：
.pretty-girl { -webkit-user-select: none; }
可是！可是！不是每個瀏覽器都可以不憂桑！！！那就只能請腳本大王出山了。
阻止選中
有時候，我們需要禁止用戶選中一些文本區域，這時候可以直接通過讓 onselectstart 事件 return false 來實現。即在body標簽中添加如下：
<body 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 還帶瀏覽器廠商前綴，意味着她們還是非標准的，將來可能會改變。在生產環境中要慎用。
清除選中
有時候用戶選中文字進行復制后，我們使用手動的方式進行選中的清除。
先來搞懂幾個小知識點：
1.獲取選中的文字
document.selection.createRange().text; IE9以下使用
window.getSelection().toString(); 其他瀏覽器使用
$('p').mouseup(function(){
var txt = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text;
alert(txt) ;
})
2.取消處於選中狀態的文字
document.selection.empty(); IE9以下使用
window.getSelection().removeAllRanges(); 其他瀏覽器使用
$('p').mouseup(function(){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
})
3.使某Dom中的文字處於選中狀態
$('.somedom').click(function(){
this.focus();
if(window.getSelection){
var range=document.createRange();
range.selectNodeContents(this);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
else if(document.selection){
//for ie
var range=document.body.createTextRange()
range.moveToElementText(this)
range.select();
}
})
使用 JS 清除選中
function clearSelections () { if (window.getSelection) { // 獲取選中 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 的樣式即可。
擴展onselect 事件
定義與用法：onselect 事件會在文本框中的文本被選中時發生。
語法：
onselect="SomeJavaScriptCode"
其中參數SomeJavaScriptCode為必需。規定該事件發生時執行的 JavaScript。
支持該事件的 HTML 標簽：
<input type="text">, <textarea>
支持該事件的 JavaScript 對象：window
實例1
在本例中，當用戶試圖選擇文本框中的文本時，會顯示一個對話框：
<form> Select text: <input type="text" value="Hello world!" onselect="alert('You have selected some of the text.')" /> <br /><br /> Select text: <textarea cols="20" rows="5" onselect="alert('You have selected some of the text.')"> Hello world!</textarea> </form>
實例2
<input type="text" value="選中的內容" id="text"/>
JS方法：
var text = document.querySelector('#text'); text.addEventListener('select',function(e){ console.log(e.target.value); //選中的內容 })
參考
https://segmentfault.com/a/1190000000638651