點擊遮罩層非內容區域關閉遮罩層的三種思路四種方案

開發過程中經常使用遮罩層展示重要信息，同時屏蔽對下層頁面的操作，其中一個可以提升用戶體驗感的地方就是點擊非內容區域關閉遮罩層，本文就提供三種思路，四種實現方案。

其中遮罩層樣式如下：

<style lang="less" scoped>
.maskParent {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 998;
  background-color: #000;
  opacity: 0.6;
}
</style>

一、父節點爲遮罩層，子節點爲內容（事件委託）

<div class="maskParent">
  <div>內容</div>
</div>

事件委託有兩種實現方案

第一種，利用event對象的target屬性判斷點擊事件是否爲遮罩層

<div class="maskParent" @click="handler">
  <div>內容</div>
</div>
<script>
function handler(event) {
  if (event.target === '父節點') {
    this.visible = false // 關閉遮罩層
  }
}
</script>

第二種，阻止內容區域click的事件冒泡

<div class="maskParent" @click="maskHandler">
  <div @click="handler">內容</div>
</div>
<script>
function handler(event) {
  event.stopPropagation()
  event.cancelBubble = true
}
function maskHandler() {
  this.visible = false
}
</script>

二、遮罩層和內容是兄弟節點，直接在遮罩層綁定click事件

<div class="maskParent" @click="maskHandler"></div>
<div @click="handler">內容</div>
<script>
function handler(event) {
  this.visible = false // 關閉遮罩層
}
</script>

三、死腦筋操作（不受節點限制）

根據鼠標點擊座標（clientX，clientY）判斷是不是遮罩層非內容區域，感覺沒人會用，拍腦袋想到的方法