問題描述
我們知道瀏覽器頁面上的文字正常情況下我們是可以雙擊選中、或者單擊鼠標(biāo)橫向拖動也能選中的，選中以后可以右擊出現(xiàn)面板然后去復(fù)制什么的。但是有的時候，這種效果我們并不想要的，比如用戶點快了的時候，所以我們需要禁用這種效果，本文記錄一下禁用選中效果的方式
鼠標(biāo)選中的效果圖如下
方式一：使用user-select屬性
css設(shè)置user-select:none;即可，若需要做瀏覽器兼容處理，請看下方完整寫法：
/* 火狐 */
-moz-user-select: none;
/* Safari 和 歐朋 */
-webkit-user-select: none;
/* IE10+ and Edge */
-ms-user-select: none;
/* Standard syntax 標(biāo)準(zhǔn)語法(谷歌) */
user-select: none;
方式二：onselectstart事件
onselectstart 就是用戶選中DOM元素時候，被開始選中時，即將要被選中，實際未被選中的這個事件。我們只要讓這個事件返回false，也就是結(jié)束這個事件，所以就不會有選中事件了，也就不會出現(xiàn)我們不想要的那種效果，代碼如下，兩種寫法
寫法一 寫在標(biāo)簽上面
<h2 onselectstart="return false;">你好啊CSS，不能被鼠標(biāo)選中</h2>
寫法二 通過綁定事件的形式文章來源：http://www.zghlxwxcb.cn/news/detail-502371.html
<body>
<h2>你好啊CSS，不能被鼠標(biāo)選中</h2>
<script>
document.querySelector('h2').onselectstart = function () {
return false
}
</script>
</body>
總結(jié)
文中介紹了兩種方式實現(xiàn)禁用選中效果，一種是通過css控制，另一種是通過js控制。注意，如果是設(shè)置在body標(biāo)簽上，那么整個頁面的文字什么的都不能被選中了…文章來源地址http://www.zghlxwxcb.cn/news/detail-502371.html
到了這里，關(guān)于兩種方式實現(xiàn)css取消頁面鼠標(biāo)雙擊選中文字或單擊拖動選中文字的效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
