关于css:两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果

30次阅读

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

正文完
 0