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
}

猜你喜欢

转载自www.cnblogs.com/yaohe/p/11132286.html