angular 点击事件阻止冒泡及默认行为
经常遇到场景:多层级元素绑定ng-click 事件,则底层元素的点击事件存在冒泡现象,怎么解决?
类似原生JS ,只是语法稍有不同,如下:
阻止冒泡 $event.stopPropagation()
阻止默认行为 $event.preventDefault()
代码实例--tab切换
// html 行内阻止
<div ng-click="parentTab(1,$event)">父盒子点击
<div class="sw_active" ng-click="ratioTab(1,$event);$event.stopPropagation();">tab1</div>
<div ng-click="ratioTab(2,$event);$event.stopPropagation();">tab2</div>
<div ng-click="ratioTab(3,$event);$event.stopPropagation();">tab3</div>
</div>
</div>
// Js 方法内阻止
$scope.ratioTab(num,$event){
$event.stopPropagation();//阻止冒泡
$event.preventDefault();// 阻止默认行为
//your coding
}