您的位置：首页 > Web前端 > AngularJS

【AngularJS学习】阻止事件冒泡

2017-12-18 15:17 411 查看
有时元素已经添加了click事件，但是它的子元素也添加了click事件。

由于事件是冒泡的，点击子元素事件后父元素事件也跟着出现点击行为。

与原生JS一样，angularjs也有一个局部变量$event，即事件对象。

1、Angular支持的event： click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste

2、Angular在执行事件函数时候传入了一个名叫$event的常量，该常量即代表当前event对象。

<!DOCTYPE html>
<html id="ng-app" ng-app="app">
<head>
<title>阻止事件冒泡</title>
</head>
<body ng-controller="demoCtrl">
<div ng-click="click('parent',$event)">
<hr>
<input type="checkbox" ng-model="stopPropagation" />停止事件冒泡
<hr>
<button type="button" ng-click="click('button',$event)">button</button>
</div>
</body>
</html>


angular.module("app",[]).controller("demo",[function($scope){
$scope.click = function(name,$event){
console.log(name +" -----called");
if($scope.stopPropagation){
$event.stopPropagation();
}
};

}]);


打开控制台，在没选中“停止事件冒泡”的情况下点击button你将会看见两条log记录，相反选中后则只会出现button的log信息。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航