AngularJs-单击按钮事件中的冒泡现象

xiaoxiao2021-03-25 74

$event.stopPropagation()阻止事件运行，防止冒泡传递事件

用法：

ng-click="doSomeSth();$event.stopPropagation();

示例一：

Stop Propagation的情况下点击button你将会看见两条log记录：button和它的容器，否则只会出现button的log信息。

<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script> </head> <body ng-controller="demo as d"> <div ng-click="d.click('parent',$event)"> given some text for click <hr> <input type="checkbox" ng-model="d.stopPropagation"/>Stop Propagation ? <hr> <button type="button" ng-click="d.click('button2222222',$event)">button</button> <hr> <button type="button" ng-click="d.click('button1111111',$event);$event.stopPropagation();">button</button>  </div>  <script> angular.module("app", []) .controller("demo", [function () { var vm = this; vm.click = function (name, $event) { console.log(name + " -----called"); if (vm.stopPropagation) { $event.stopPropagation(); } }; return vm; }]); </script> </body> </html>

示例二：

<!DOCTYPE html> <html ng-app="a10_7"> <head> <title>解决点击按钮事件中的冒泡现象</title> <script src="../Script/angular.min.js"></script> <style type="text/css"> .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="c10_7 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 type="text/javascript"> angular.module('a10_7', []) .controller('c10_7', function ($scope) { var obj = this; /*this指的是controller本身*/ obj.click = function (name, $event) { /*参数：触发事件的元素名称，事件*/ console.log(name + "被触发"); //按钮---->父级：冒泡事件 if (obj.stopPropagation) { $event.stopPropagation(); /*阻止事件的冒泡*/ } }; obj.change = function ($event) { $event.stopPropagation(); /*阻止事件的冒泡*/ }; return obj; }); </script> </body> </html>

参考：

《angularjs实战》

转载请注明原文地址: https://ju.6miu.com/read-37634.html

技术

最新回复(0)