Angular解決IE和Firefox下button內部元素ng-click事件被遮蔽
阿新 • • 發佈：2019-01-08
如果我們在button元素內部有其它的子元素並且繫結點選事件，比如：
而我們的程式碼是這樣的：
<body ng-controller="ctrl">
<script>
angular.module("app", [])
.controller("ctrl", function($scope){
$scope.sayButton = function(e){
alert('button');
};
$scope.saySpan = function 這種情況下 chrome下點選span元素，會提示兩個，即’span’和’button’，而對於IE則只提示’button’。（點選button均只提示’button’）
解決IE的處理點選事件錯誤的方式就是找“別的元素”來代替”button”元素，”狸貓換太子“。所以程式碼就變成了這樣：
<div class="btn btn-default btn lg" ng-click="sayButton($event)">
Button
<span class="star glyphicon glyphicon-star" ng-click 這樣結果對於chrome和IE結果都是一樣的，點選span元素先提示’span’後提示’button’，點選button元素只提示’button’。
還有個問題就是阻止事件冒泡了，解決方法只需要在函式最後新增e.stopPropagation(); 這句程式碼，所以最終我們的結果就是：
<body ng-controller="ctrl">
<script>
angular.module("app", [])
.controller("ctrl", function($scope){
$scope.sayButton = function(e){
alert('button');
e.stopPropagation();
};
$scope.saySpan = function(e){
alert('span');
e.stopPropagation();
};
})
</script>
<div class="btn btn-default btn lg" ng-click="sayButton($event)">
Button
<span class="star glyphicon glyphicon-star" ng-click="saySpan($event)"></span>
</div>
</body>效果圖：（IE下）
Chrome下：
部落格寫到這FireFox也終於打開了，順便看看效果：
FireFox下：
