欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-09 20:17:44
解决z-index上层元素遮挡下层元素点击事件问题 by:授客 QQ:1033553122 开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 需求描述 如下,有以下界面,其中右侧边时一个ElementUI Dialog模态对话框,希望在对话框上执行点击操作时,不会点击 ......

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

by:授客 qq1033553122

开发环境

win 10

element-ui  "2.8.2"

vue 2.9.6

 

需求描述

如下,有以下界面,其中右侧边时一个elementui dialog模态对话框,希望在对话框上执行点击操作时,不会点击到被对话框遮挡的页面的按钮,同时,也希望可以点击对话框区域外的其它页面元素

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

 

 

html元素结构如下

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

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

 

 

解决方案

为被遮挡元素上层使用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>