解決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>