【AngularJS学习】阻止事件冒泡

来源：互联网发布：linux终端删除文件夹编辑：程序博客网时间：2024/06/10 19:02

有时元素已经添加了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信息。

阅读全文

1 0