CSS 解决z-index上层元素遮挡下层元素点击事件问题

授客

发布于 2019-12-12 17:16:45

3.5K0

发布于 2019-12-12 17:16:45

文章被收录于专栏：授客的专栏

解决z-index上层元素遮挡下层元素点击事件问题

开发环境

Win 10

element-ui "2.8.2"

需求描述

如下，有以下界面，其中右侧边时一个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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-12-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html