【AngularJS】解决单击按钮事件中的冒泡现象

来源：互联网发布：mysql 查询最大连接数编辑：程序博客网时间：2024/06/07 23:59

解决方法是，当子节点元素触发单击事件后，就需要终止该事件的冒泡，终止的方法是调用事件本身的stopPropagation方法，即event.stopPropagation，该方法的功能是终止事件的传播，在事件的节点上调用事件后，不再将事件分派到其他节点上。

<!DOCTYPE html>  <html ng-app="myApp">  <head>  <meta charset="UTF-8">  <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>  <style>  .frame{    padding: 5px 8px;    margin: 0px;    font-size: 12px;    width: 320px;    background-color: #eee;  }  .frame div{    margin: 10px 0px;  }</style> </head>  <body>    <div ng-controller="myCtrl as o" class="frame">    <div ng-click="o.click('父级', $event)">      在按钮的单击事件中，阻止冒泡现象。      <br>      <input type="checkbox" ng-click="o.change($event)" ng-model="o.stopPropagation">是否阻止冒泡？      <br><br>      <button type="button" ng-click="o.click('按钮', $event)">点击我</button>    </div>  </div>  <script>    angular.module('myApp', [])      .controller('myCtrl', function($scope){        var obj = this;        obj.click = function(name, $event){          console.log(name + "被触发");          if(obj.stopPropagation){            $event.stopPropagation();          }        };        obj.change = function($event){          $event.stopPropagation();        }        return obj;      });  </script></body>  </html>

0 0