共计 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 标签上,那么整个页面的文字什么的都不能被选中了 …
正文完