angular 禁止事件冒泡 和 默认行为
事件冒泡和事件捕捉一直以来都是被讨论的话题，也许大家平时在工作中没有遇到过需要解决事件冒泡的情况
举个例子：
<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 阻止默认行为
//你自己的代码
};
.
angular 禁止事件冒泡 和 默认行为的更多相关文章
- JS事件——禁止事件冒泡和禁止默认事件
Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 一.什么是事件冒泡 在一 ...
- js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false
preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就 ...
- vue.js阻止事件冒泡和默认事件
首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...
- Vue2学习笔记:事件对象、事件冒泡、默认行为
1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset= ...
- JavaScript事件冒泡机制和阻止事件冒泡及默认事件
一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true: FF下:event ...
- vue阻止事件冒泡和默认事件
本文地址:https://www.cnblogs.com/guomin/p/9273862.html 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } ca ...
- Angular ngClick 阻止冒泡和默认行为
这其实是一个很简单的问题,如果你认真查看过Angular官方的API文档,本来不想记录的.但是这个问题不止一次的被人问起,所以今天在记录在这里. 在Angular中已经对一些ng事件如ngClick, ...
- javascript如何阻止事件冒泡和默认行为
阻止冒泡: 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而以引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷.下面的demo ...
- 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
随机推荐
- Windows下的cd命令
http://blog.sina.com.cn/s/blog_5e971b850100rtta.html 首先先了解下什么是驱动器,什么是盘符. 驱动器是指通过系统格式化并带有一个驱动器号的存储区域, ...
- RabbitMQ (九) 消息的参数详解
上篇文章讲了声明一个队列时的参数设置,这篇文章主要说一说发布消息时的参数设置. 发布消息时的完整入参是这样的: channel.BasicPublish ( exchange: "test_ ...
- AC自动机专题总结
最近学习了AC自动机,做了notonlysuccess大牛里面的题,也该来个总结了. AC自动机(Aho-Corasick Automaton)在1975年产生于贝尔实验室,是著名的多模匹配算法之一. ...
- AGC 014 B - Unplanned Queries
题面在这里! 很显然的一件事是,我们把路径覆盖改成两个点分别到根的路径覆盖,答案是不会变的,因为lca以上被覆盖了两次不变奇偶性.. 这么做的好处就是,我们只需要考虑每个点的覆盖次数带来的影响就行了, ...
- CodeForces - 965D Single-use Stones
题面在这里! 如果你强行把问题建模,可以发现这是一个裸的增广路,又因为这是区间连边,所以跑一个 点数O(N)边数O(N log N)的线段树优化建边的网络流即可,不知道能不能过23333 但其实这个问 ...
- 【Matrix-tree定理】【BEST Theorem】hdu6064 RXD and numbers
题意:给你一张有向图,求从1出发,回到1的欧拉回路数量. 先特判掉欧拉回路不存在时的情况. 看这个吧:http://blog.csdn.net/yuanjunlai141/article/detail ...
- nginx和php-fpm的用户权限
启动php-fpm sudo php-fpm -c /etc/php.ini [17-Sep-2018 00:36:59] ERROR: [pool www] please specify user ...
- HTTP模块理解（二）
这是我在写,用express+ajax+swig来做一个简单的应用的时候,遇到的问题.还是不太理解http模块. 后来在网上看到云栖社区的一篇<Node.js之HTTP请求与响应>,这里做 ...
- iOS笔记,得到一个控件的坐标
[showBtn.superView convertRect:showBtn.frame toView:nil]: 参数从后往前理解: toView-->指的目标控件的坐标需要在哪个view上 ...
- Visio显示不完整
下面显示不完整的话,选中对象,菜单栏设置(点击对象,右键并没有段落选项)行距为单倍:右侧显示不完整,选中后右键设置环绕方式为负于文字上方,原来是嵌入型.