Angular 2：當點擊鏈接時停止父元素事件的傳播

Question

我有一個事件冒泡的情況。示例：

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

標記通過innerHtml從另一個組件呈現。問題：當我點擊鏈接時，元素的點擊事件也被觸發。如何解決問題（停止傳播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

您可以使用$事件如下對象，

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

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

Answer 3

您可以起泡的優勢。從您的處理程序中，您可以查看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