问题形容
咱们晓得浏览器页面上的文字失常状况下咱们是能够双击选中、或者单击鼠标横向拖动也能选中的，选中当前能够右击呈现面板而后去复制什么的。然而有的时候，这种成果咱们并不想要的，比方用户点快了的时候，所以咱们须要禁用这种成果，本文记录一下禁用选中成果的形式
鼠标选中的效果图如下
形式一：应用user-select属性
css设置user-select:none;即可，若须要做浏览器兼容解决，请看下方残缺写法：
代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h2 { /* 火狐 */ -moz-user-select: none; /* Safari 和 欧朋 */ -webkit-user-select: none; /* IE10+ and Edge */ -ms-user-select: none; /* Standard syntax 规范语法(谷歌) */ user-select: none; } </style></head><body> <h2>你好啊CSS</h2></body></html>当然咱们通过js选中dom元素去设置css款式也是能够的：document.querySelector('h2').style.userSelect = "none"el-table也应用了user-select这个属性
审查元素图解一下：
MDN官网概念定义传送门：https://developer.mozilla.org...
形式二：onselectstart事件
onselectstart 就是用户选中DOM元素时候，被开始选中时，行将要被选中，理论未被选中的这个事件。咱们只有让这个事件返回false，也就是完结这个事件，所以就不会有选中事件了，也就不会呈现咱们不想要的那种成果，代码如下，两种写法
写法一 写在标签下面
<h2 onselectstart="return false;">你好啊CSS，不能被鼠标选中</h2>
写法二 通过绑定事件的模式
<body> <h2>你好啊CSS，不能被鼠标选中</h2> <script> document.querySelector('h2').onselectstart = function () { return false } </script></body>总结
文中介绍了两种形式实现禁用选中成果，一种是通过css管制，另一种是通过js管制。留神，如果是设置在body标签上，那么整个页面的文字什么的都不能被选中了...