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 {}

来源

2017-06-22 mrsq

你观察到的行为来自于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>始终是直接孩子元素。

来源

2017-06-22 16:33:27

谢谢。这适用于链接嵌套图像的情况，但奇怪的是，Angular似乎并没有冒泡@HostLIstener。它只是记录一个或IMG，它应该在理论上继续记录DOM树 – mrsq

你是什么意思'继续记录DOM树？ –

@mrsq hostListener回调只在点击时触发一次，但是您可以看到点击事件确实会冒泡DOM树https://plnkr.co/edit/tN3ojjy0Nh78k8kzQmX8?p=preview – LLai

Angular 2/4 HostListener没有点击正确的事件？

回答

相关问题