关于错误样式遮挡点击事件问题

最新推荐文章于 2022-07-14 18:02:55 发布

升平乐坊主

最新推荐文章于 2022-07-14 18:02:55 发布

阅读量306

点赞数

分类专栏：实践知识点

本文链接：https://blog.csdn.net/palmshe/article/details/50727519

版权

实践知识点专栏收录该内容

10 篇文章 0 订阅

订阅专栏

运用场景

在实际开发中遇到<textarea>、<a>元素获取不到焦点或点击无响应的情况，其原因就是有元素在它们之上，阻挡了交互

异常图片

异常代码

  <style type="text/css">
        .mask {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 20px;
            left: 105px;
            background-color: rgba(255, 0, 0, 0.21);
            /*
                如果改样式的元素中没有内容，也没有背景颜色，
                那么会导致异常不容易发现，如果通过浏览器元
                素查看器监测到有异常多余的盒模型，就应该检
                查是否存在异常样式
            */
        }
    </style>

<body>
    <div id="insertBody">
        <a href="#">访问</a>
        <!--
            该链接被mask样式的div遮盖，无法点击
        -->
    </div>
    <div class="mask"></div>
</body>