共计 1181 个字符，预计需要花费 3 分钟才能阅读完成。
问题形容
咱们晓得浏览器页面上的文字失常状况下咱们是能够双击选中、或者单击鼠标横向拖动也能选中的，选中当前能够右击呈现面板而后去复制什么的。然而有的时候，这种成果咱们并不想要的，比方用户点快了的时候，所以咱们须要禁用这种成果，本文记录一下禁用选中成果的形式
鼠标选中的效果图如下
形式一：应用 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 标签上，那么整个页面的文字什么的都不能被选中了 …
正文完