javascript - 点击事件不会在点击时触发？

Question

我有以下 html(我的 Angular 5 组件中的模板):

<div class="center">
    <object id="img" data="assets/img/big_layout.svg" #svg></object>
</div>

在我的组件中我有这个:

  @ViewChild('svg') svg: ElementRef;

  ngAfterViewInit() {
    this.svg.nativeElement.addEventListener('load', () => { // wait for the svg to load
      console.log('Clicked...')
    }, false);
  }

正如预期的那样，这个逻辑工作正常 - 当组件加载时，我会为 View 中组件的每个实例记录 Clicked... 。

但是，一旦我将事件从 'load' 更改为 'click'，单击 svg 不会触发任何事件？

知道为什么吗？

更新:

如链接问题中所述，以下 html 也不会触发点击事件:

<div class="center" (click)="onClick()">
    <object id="img" (click)="onClick()" data="assets/img/big_layout.svg" #svg></object>
</div>

这是一个 plunk demo

Answer 1

奇怪的是，它不适用于您的项目，可能是由于新的 Angular 5 版本所致。

您可以通过直接在模板上绑定(bind)(click)事件来实现您想要的:

<div class="center">
    <object id="img" data="assets/img/big_layout.svg" (click)="onClick()"></object>
</div>

并通过在组件文件中添加方法:

onClick() {
    console.log('Clicked');
}

编辑:对象标签就像 iframe，出于安全目的无法访问它们!