angular 点击事件阻止冒泡及默认行为

最新推荐文章于 2024-11-27 19:01:14 发布

转载最新推荐文章于 2024-11-27 19:01:14 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yaohe/p/11132286.html

文章标签：

#javascript #ViewUI

本文详细介绍了在AngularJS中如何使用$event.stopPropagation()和$event.preventDefault()来阻止元素点击事件的冒泡和默认行为。通过具体的代码实例，如tab切换功能的实现，展示了如何在HTML行内和JS方法内有效应用这些方法。

经常遇到场景：多层级元素绑定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
}

转载于:https://www.cnblogs.com/yaohe/p/11132286.html