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原生方法