angular 禁止事件冒泡 和 默认行为
2024-08-30 18:25:39
事件冒泡和事件捕捉一直以来都是被讨论的话题，也许大家平时在工作中没有遇到过需要解决事件冒泡的情况
举个例子：
<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 阻止默认行为
//你自己的代码
};
.
最新文章
- 如何让spring mvc web应用启动时就执行特定处理
- c#小小总结（设计模式）
- Java性能优化
- ASP.NET MVC 网站开发总结（四）——校友平台开发总结
- POJ1737 Connected Graph
- mysql 备份与还原
- HTML之学习笔记（九）表单
- 03-案例——多任务版TCP服务端程序开发
- R语言学习——数据框
- 【MySQL】sql_mode引起的一个问题和总结
- .NET 配置文件实用指南
- 解决win10无法访问共享
- 最近无意中看到一个讲解spring mvc的系列，从源码的角度讲解，特记录下来，供以后反复学习
- 自建yum源解决Ceph搭建过程中从官网取包慢的问题
- Python包管理工具pip安装
- 将windbg设置为默认调试器命令
- 面向过程中的局部变量（global）
- 泛型深入--java泛型的继承和实现、泛型擦除
- 自定义控件（视图）2期笔记14：自定义视图之View事件分发 dispatchTouchEvent，onTouch，onTouchEvent，onClick逻辑顺序过程
- onblur & onchange