angular 點擊特定區域外事件

angular 點擊特定區域外事件

模板

<div #unclick>這裏不出發事件, 點擊其餘區域出發事件</Div>
或者
<div class="unclick">這個也不行哦</Div>

上代碼

// 視圖選擇裝飾器函數(對應模板`<div #unclick>`) 
@ViewChildren('unclick') unclick: QueryList<ElementRef>;

//監聽dom
@HostListener('document:click', ['$event']) bodyClick(e) {
  // if(!e.path || e.path || e.path.forEach) return

  // getTrigger(this.unclick) ? '觸發全局點擊' : '不觸發全局點擊'
  console.log(getTrigger(this.unclick, 'unclick'))

  function getTrigger(queryList, className?) {
    let flag = true;
    // 遍歷事件節點
    (<HTMLElement[]>e.path).forEach(i => {
      // 是否爲 #unclick
      flag && queryList.forEach(el => {
        i.isEqualNode && i.isEqualNode(el.nativeElement) && (flag = false)
      })
      // 是否爲 class="unclick"
      flag && i.className && i.className.indexOf && i.className.indexOf(className) > -1 && (flag = false)
    })
    return flag
  }

}

相關知識點:

QueryList<ElementRef> 是 ViewChildren 對應的interface

(<HTMLElement[]>e.path) <HTMLElement[]> 用來斷言e.path的類型

ElementRef.nativeElement 得到原生DOM節點

isEqualNode className 爲DOM原生方法