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

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示例

Answer 3

您可以$event如下使用对象：

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

stopPropagation(event: Event){
    event.stopPropagation();
    ...
}