Question

我有一个指令myPopUp，我附加到<a>元素以获取链接

但是，当我向<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 {}

Answer 1

您观察到的行为来自于target指的是您点击的元素。在第一个示例中，<a>标记内没有任何内容，因此当您单击它时，它是注册点击的元素，您将获得对<a>的引用。在第二个示例中，点击实际上已在<img>上注册，这就是target中引用的原因。

如果您将@HostListener放在指令myPopUp上，则可以使用<a>到达currentTarget元素：

@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>始终是<a>元素的直接子元素。

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

1 个答案: