2017-11-18 62 views
1

我有兩個功能,第一個是myFunction的()和myDiv()爲什麼內的函數調用運行第一比母體函數調用角2

<div (click)="myDiv()"> 
    <button (click)="myFunction()"> Submit </button> 
</div> 

在AppComponent我有這兩種功能的認定中像這樣:

myFunction() 
{ 
    console.log("I am in myFunction"); 
} 

myDiv() 
{ 
    console.log("I am in myDiv"); 
} 

這樣做的結果應該是:

我在myFunction的

我在myDiv

爲什麼myFunction在myDiv之前先運行?是什麼原因?

+0

原因是這是事件如何傳播。閱讀關於此https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Progagation – dfsq

回答

3

這是因爲click事件冒泡

<html>(document)            
                 /\ 
    <div (click)="myDiv()">        || 

                 /\ 
    <button (click)="myFunction()"> Submit </button> || 
    </div> 

參見

如果你想myDiv處理程序先叫你應該趕在捕捉事件階段

el.addEventListener('click', myDiv, true); 
            \/ 
            useCapture 

AFAIK角度不支持useCapture選項。這裏是一個workaround

+0

我不明白我怎麼可以在我的代碼中添加useCapture 我已經添加ElementRef和渲染器 – kappo

+0

我已將示例添加到我的答案 – yurzui

+0

我在修改我的代碼後出現此錯誤: 將代碼放入ngAfterViewInit()後無法讀取nativeElement的undefined屬性爲null – kappo