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

问题形容

咱们晓得浏览器页面上的文字失常状况下咱们是能够双击选中、或者单击鼠标横向拖动也能选中的,选中当前能够右击呈现面板而后去复制什么的。然而有的时候,这种成果咱们并不想要的,比方用户点快了的时候,所以咱们须要禁用这种成果,本文记录一下禁用选中成果的形式

鼠标选中的效果图如下

形式一:应用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标签上,那么整个页面的文字什么的都不能被选中了…

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据