问题描述
我们知道浏览器页面上的文字正常情况下我们是可以双击选中、或者单击鼠标横向拖动也能选中的，选中以后可以右击出现面板然后去复制什么的。但是有的时候，这种效果我们并不想要的，比如用户点快了的时候，所以我们需要禁用这种效果，本文记录一下禁用选中效果的方式
鼠标选中的效果图如下
方式一：使用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/zh-CN/docs/Web/CSS/user-select
方式二：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标签上，那么整个页面的文字什么的都不能被选中了...
