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>