CSS 解決z-index上層元素遮擋下層元素點擊事件問題

• 2019 年 12 月 12 日
• 筆記

解決z-index上層元素遮擋下層元素點擊事件問題

開發環境

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>