angularJS如何处理事件冒泡

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

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

0 ·

CC 4.0 BY-SA版权

angularJs 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何在AngularJS中阻止事件冒泡。通过使用$event.stopPropagation()方法，可以确保只有目标元素上的事件处理器被调用，而不会影响到父级元素。此技巧对于精确控制DOM事件流非常有用。

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

<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元素上绑定的事件