脚本宝典收集整理的这篇文章主要介绍了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原生方法
以上是脚本宝典为你收集整理的angular 点击特定区域外事件全部内容,希望文章能够帮你解决angular 点击特定区域外事件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。