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 (e){
alert('span');
};
})
</script>
<button class="btn btn-default btn lg" ng-click="sayButton($event)">
Button
<span class="star glyphicon glyphicon-star" ng-click="saySpan($event)"></span>
</button>
</body>
這種情況下 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 ="saySpan($event)"></span>
</div>
這樣結果對於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下: