angularJS如何處理事件冒泡
阿新 • • 發佈：2019-01-25
事件冒泡和事件捕捉一直以來都是被討論的話題，也許大家平時在工作中沒有遇到過需要解決事件冒泡的情況
舉個栗子：
<body ng-click="fun1()">
<div ng-click="fun2()">
<img ng-click="fun3()" src="xxx.png"/>
</div>
</body>
從以上的程式碼中的fun1(),fun2()和fun3()我們可以看出，當我們點選了<img/>標籤中的ng-click事件，觸發fun3()方法，
但是根據文件物件模型的特徵，我們雖然只想觸發fun3()方法，事件一直向上一層進行冒泡，fun2()和fun1()也會隨後執行
此時，為了達到只執行fun3()方法的效果，我們要要在fun3()中寫入組織事件冒泡的程式碼
在這裡著重講一下angularJs中是如何實現阻止事件冒泡的
當我們在一個標籤上使用了controller中寫好的方法時
<div fun1($event)></div>
angularJS中的執行方法會自帶一個$event，這個$event是當前事件的物件，我們直接對這個事件物件進行操作就可以達到阻止事件冒泡的效果
$scope.fun1=function($event){
$event.stopPropagation(); //stopPropagation是目前最常用也是最標準的解決事件冒泡的方法
//你自己的程式碼
};
這樣我們就可以實現，只實行fun1()，不會執行其外層DOM元素上繫結的事件