web-dev-qa-db-ja.com

Angular 2：リンクをクリックすると、親要素のイベントの伝播を停止します

イベントバブリングのケースがあります。例：

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

タグは、innerHtmlを介して別のコンポーネントからレンダリングされます。問題：リンクをクリックすると、要素のクリックイベントも発生します。問題を解決する方法（doSomething（）の伝播を停止する）、イベントハンドラ（または任意のangular 2 code）がinnerHtmlを通過できないことを知っていますか？

ありがとうございました！

angulartypescriptinnerhtmlangular2-templateevent-bubbling
13
misha

回避策は単に(click)="$event.stopPropagation()" over textコンポーネント。そのため、イベントはホスティングコンポーネントからバブルアップされません。 Directiveを書くことで同じことが即興でできます。

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

バブリングを利用できます。ハンドラーから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')
  }
}

プランカーの例

7
yurzui

以下のように$eventオブジェクトを使用できます。

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

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