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>