angular 禁止事件冒泡 和 默认行为
2017-04-24 22:53
211 查看
事件冒泡和事件捕捉一直以来都是被讨论的话题,也许大家平时在工作中没有遇到过需要解决事件冒泡的情况
举个例子:
从以上的代码中的fun1(),fun2()和fun3()我们可以看出,当我们点击了<img/>标签中的ng-click事件,触发fun3()方法,
但是根据文档对象模型的特征,我们虽然只想触发fun3()方法,事件一直向上一层进行冒泡,fun2()和fun1()也会随后执行
此时,为了达到只执行fun3()方法的效果,我们要要在fun3()中写入组织事件冒泡的代码
在这里着重讲一下AngularJS中是如何实现阻止事件冒泡的
当我们在一个标签上使用了controller中写好的方法时
angularJS中的执行方法会自带一个$event,这个$event是当前事件的对象,我们直接对这个事件对象进行操作就可以达到阻止事件冒泡的效果
这样我们就可以实现,只实行fun1(),不会执行其外层DOM元素上绑定的事件。
同理,阻止默认行为:$event.preventDefault();
.
举个例子:
<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元素上绑定的事件。
同理,阻止默认行为:$event.preventDefault();
$scope.fun1=function($event){ $event.preventDefault(); //preventDefault 阻止默认行为 //你自己的代码 };
.
相关文章推荐
- 滚轮事件的防冒泡、阻止默认行为的代码(效果是:只让当前div滚动,连当前文档都不滚动的效果)
- js事件 封装方法(添加事件、删除事件、阻止冒泡、阻止默认行为)
- 阻止事件冒泡和取消浏览器默认行为
- 阻止浏览器默认行为和冒泡事件兼容ie,ff
- jquery 事件冒泡的介绍以及如何阻止事件冒泡、浏览器默认行为
- 浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
- angular ngClick阻止冒泡,默认行为
- 带你学习JQuery:事件冒泡和阻止默认行为
- 阻止事件冒泡和浏览器默认行为
- js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false
- 兼容性之停止事件冒泡和阻止默认行为
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
- 阻止事件冒泡和浏览器默认行为,考虑兼容性
- javascript阻止事件冒泡和浏览器的默认行为
- 如何阻止事件冒泡和默认行为?
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- 阻止浏览器默认行为和事件冒泡
- JavaScript 事件流(事件要素/普通事件/事件绑定/事件冒泡/阻止冒泡/阻止默认行为)
- JS:停止事件冒泡和阻止浏览器的默认行为 js/jquery/prototype
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交)