angularJS如何处理事件冒泡

浪尽此生 提交于 2019-12-09 06:50:06

事件冒泡和事件捕捉一直以来都是被讨论的话题,也许大家平时在工作中没有遇到过需要解决事件冒泡的情况
举个栗子:

<body ng-click="fun1()">
  <div ng-click="fun2()">
     <img  ng-click="fun3()" src="xxx.png"/>
  </div>
</body>

从以上的代码中的fun1(),fun2()和fun3()我们可以看出,当我们点击了<img/>标签中的ng-click事件,触发fun3()方法,
但是根据文档对象模型的特征,我们虽然只想触发fun3()方法,事件一直向上一层进行冒泡,fun2()和fun1()也会随后执行
此时,为了达到只执行fun3()方法的效果,我们要要在fun3()中写入组织事件冒泡的代码

在这里着重讲一下angularJs中是如何实现阻止事件冒泡的
当我们在一个标签上使用了controller中写好的方法时

<div fun1($event)></div>

angularJS中的执行方法会自带一个$event,这个$event是当前事件的对象,我们直接对这个事件对象进行操作就可以达到阻止事件冒泡的效果

 $scope.fun1=function($event){
  $event.stopPropagation();   //stopPropagation是目前最常用也是最标准的解决事件冒泡的方法
  //你自己的代码
};

这样我们就可以实现,只实行fun1(),不会执行其外层DOM元素上绑定的事件

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!