Angular 2/4 HostListener没有点击正确的事件?
问题描述:
我有一个指令myPopUp
我连接到<a>
元素,以获得链接Angular 2/4 HostListener没有点击正确的事件?
然而,当我将图像添加到<a>
标签,@HostListener
只有抓住img
,并不能上升。
如何在内部存在图像时获取标签参考?
这里是我的plunkr https://plnkr.co/edit/80OGOKLSW3HjJfXjP7O2?p=preview(查看控制台)
,代码:
@Component({
selector: 'my-app',
template: `
<a href="http://google.com" myPopUp>
<img src="http://via.placeholder.com/350x150"/>
</a>
<br/>
<a href="http://google.com" myPopUp>
This works fine, event is A tag
</a>
`,
})
export class App {
@Directive({ selector: '[myPopUp]' })
@HostListener('click', ['$event'])
onClick(event: MouseEvent) {
console.log(event.target);
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
答
你观察到的行为来自于target
是指你所点击的元素的事实。在第一个示例中,<a>
标签内没有任何内容,因此当您单击该标签时,它就是注册点击的元素,您将获得对<a>
的引用。在第二个示例中,点击实际上在<img>
上注册,这就是为什么它在target
中被引用。
如果你把@HostListener
在指令myPopUp
,你可以使用currentTarget
达到<a>
元素:
@Directive({ selector: '[myPopUp]' })
class myPopUp {
@HostListener('click', ['$event'])
onClick(event: MouseEvent) {
console.log(event.currentTarget);
}
}
但是,如果你想拥有@HostListener
根元素上你唯一的解决办法是使用节点遍历和参考parentNode
:
@HostListener('click', ['$event'])
onClick(event: MouseEvent) {
console.log(event.target.parentNode);
}
但假定<img>
始终是直接孩子元素。
谢谢。这适用于链接嵌套图像的情况,但奇怪的是,Angular似乎并没有冒泡@HostLIstener。它只是记录一个或IMG,它应该在理论上继续记录DOM树 – mrsq
你是什么意思'继续记录DOM树? –
@mrsq hostListener回调只在点击时触发一次,但是您可以看到点击事件确实会冒泡DOM树https://plnkr.co/edit/tN3ojjy0Nh78k8kzQmX8?p=preview – LLai