CSS 解决z-index上层元素遮挡下层元素点击事件问题
解决z-index上层元素遮挡下层元素点击事件问题
by:授客 QQ:1033553122
开发环境
Win 10
element-ui "2.8.2"
Vue 2.9.6
需求描述
如下,有以下界面,其中右侧边时一个ElementUI Dialog模态对话框,希望在对话框上执行点击操作时,不会点击到被对话框遮挡的页面的按钮,同时,也希望可以点击对话框区域外的其它页面元素
html元素结构如下
解决方案
为被遮挡元素上层使用z-index属性的元素添加以下样式:
pointer-events: none;
这样点击事件就能穿透上层元素,可点击到被遮挡元素,但是此时,上层元素无法响应点击事件
然后为被遮挡元素添加以下样式,让上层元素可以响应点击事件(仅让被遮挡元素自身可以响应点击事件):
pointer-events: auto;
代码实现
<template>
<!-- 用例详情组件 -->
<div class="case-dialog-div">
<el-dialog
ref="caseDialog"
:title="caseDialogTitle"
:visible="caseDialogVisible"
:fullscreen="fullscreen"
:modal="false"
:close-on-click-modal="false"
:before-close="beforeClose"
custom-class="case-dialog-class"
@close="onCloseDialog"
>
...略
</el-dialog>
</div>
</template>
<style lang="scss">
// 修改dialog body样式//该样式不能放置.case-dialog-div下,否则 全屏 功能不起作用
.case-dialog-class {
position: fixed;
pointer-events: auto; // dialog本身区域不让“穿透点击”
display: block;
height: 100%;
width: 50%; // width: 959px;
right: 0px;
margin-top: 0px !important;
padding: 10px !important;
overflow: auto;
}
.case-dialog-div {
.el-dialog__wrapper {
pointer-events: none; // 可点击dialog区域外的html元素
}
...略
}
</style>
作者:授客
微信/QQ:1033553122
全国软件测试QQ交流群:7156436
Git地址:https://gitee.com/ishouke
友情提示:限于时间仓促,文中可能存在错误,欢迎指正、评论!
作者五行缺钱,如果觉得文章对您有帮助,请扫描下边的二维码打赏作者,金额随意,您的支持将是我继续创作的源动力,打赏后如有任何疑问,请联系我!!!
微信打赏
支付宝打赏 全国软件测试交流QQ群
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库