Question

我有一个事件冒泡的案例。示例：

<td (click)="doSomething()">
  <text [innerHtml]="content"> 
        //  content of innerHtml is :  <a href="http://google.com"></a>
  </text>
</td>

标记通过innerHtml从另一个组件呈现。问题：当我点击链接时，也会触发元素的click事件。如何解决问题（停止传播doSomething（）），知道事件处理程序（或任何角度2代码）无法通过innerHtml传递？

谢谢！

Answer 1

解决方法可能只是将(click)="$event.stopPropagation()"放在text组件上，这样该事件就不会从托管组件中冒出来。同样的事情可以通过写Directive来即兴发挥。

<td (click)="doSomething()">
  <text (click)="$event.stopPropagation()" [innerHtml]="content"> 
        //  content of innerHtml is :  <a href="http://google.com"></a>
  </text>
</td>

Answer 2

你可以利用冒泡。在处理程序中，您可以查看event.target以查看是否点击了A，如果是，请跳过您的操作。

但要小心，因为event.target可能是SPAN！您不仅要检查事件的目标是否是A标记，还要在简单的冒泡模拟中向上走DOM树。

所以这是可能的解决方案：

<强>模板

(click)="doSomething($event)"

<强>组件

export class AppComponent {
  content = '<a href="http://google.com">Link text <span>Nested text</span></a>'

  doSomething(e) {
    let target = e.target;

    while (target !== e.currentTarget) {
      if (target.tagName == 'A') return;
      target = target.parentNode;
    }

    alert('do something')
  }
}

<强> Plunker Example

Answer 3

您可以使用 $ event 对象，如下所示

<a (click)="stopPorpagation($event);false"     //<<<----added click event
    href="http://google.com">
</a>

stopPorpagation(event:any){
    event.stopPropagation();
    ....
}

Answer 4

（click）=“ $ event.stopPropagation（）”对我有用，早些时候我曾尝试在没有“ $”的情况下无法正常工作。

Angular 2：单击链接时停止父元素事件的传播

4 个答案: