添加遮罩层，实现点击穿透，实现遮罩层按钮点击，遮罩层下层点击事件

最新推荐文章于 2024-08-12 22:06:26 发布

不想上班只想要钱

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量2.4k

点赞数 1

分类专栏： css 前端 html 文章标签： css html css3

本文链接：https://blog.csdn.net/Aa12364567/article/details/126302244

版权

前端同时被 3 个专栏收录

153 篇文章 3 订阅

订阅专栏

html

89 篇文章 1 订阅

订阅专栏

css

84 篇文章 1 订阅

订阅专栏

给绝对定位的层多加一个样式：" pointer-events:none; " 这样绝对定位层下的元素就可以点击了
如果在绝对定位层上存在能够点击的元素，在添加" pointer-events:none; " 后将同样不起作用。
为了避免此情况，可以给需要操作的元素设置" pointer-events:auto" 即可

//遮罩层
  <div class="map-wrapper">
  //遮罩层按钮等组件
            <el-button @click="pic" style=" pointer-events:auto">画图</el-button>
  </div>
  //遮罩层下方内容
   <div id="yzMap" style="position: absolute; width: 99%; height: 95%"></div>

.map-wrapper {
    width: 99%;
    height: 95%;
    position: absolute;
    pointer-events: none;
    /*取消事件,点击穿透*/
    z-index: 100;
    background-color: rgba(252, 252, 252, 0.5);
}