添加遮罩层,实现点击穿透,实现遮罩层按钮点击,遮罩层下层点击事件
添加遮罩层,实现点击穿透,实现遮罩层按钮点击,遮罩层下层点击事件_前端 点击出现遮罩层_不想学习只想玩的博客-CSDN博客 给绝对定位的层多加一个样式:" 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);
}