有时候，我们需要使页面内容不可选择。首先想到的是一个css属性：user-select。user-select有两个值：

none：用户不能选择文本 
text：用户可以选择文本  

禁用选择代码实现

html:

<p>你可以选择我。</p>
<p class="noselect">你不能选择我！</p>

css:

.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}

需要注意的是：

1、user-select并不是一个W3C的CSS标准属性，浏览器支持的不完整，需要对每种浏览器进行调整  。

2、在 IE < 10 和Opera < 15中我们需要在需要禁止选中的元素上面添加一个属性unselectable="on"，否则可能不会生效哦。

除了css外，我们同样可以使用js来实现：

document.body.onselectstart = document.body.ondrag =function(){
    return false;
}

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/1279