【AngularJS学习】阻止事件冒泡

最新推荐文章于 2023-05-05 13:29:28 发布

原创最新推荐文章于 2023-05-05 13:29:28 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #angularjs

angularjs 专栏收录该内容

3 篇文章

订阅专栏

有时元素已经添加了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();
        }
    };

}]);