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上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
随机推荐
- mac MyEclipse2017 CI10安装破解心得
前段时间也不知弄了什么东西把之前的me弄坏了,于是看看新版本的情况,准备安装个新版本,一看出了ci10,安装之. 破解资源请到这里下载 https://download.csdn.net/downlo ...
- SpringBoot整合SpringBatch实用简例
SpringBatch主要是一个轻量级的大数据量的并行处理(批处理)的框架. 作用和Hadoop很相似,不过Hadoop是基于重量级的分布式环境(处理巨量数据),而SpringBatch是基于轻量的应 ...
- luogu P1353 [USACO08JAN]跑步Running
题目描述 The cows are trying to become better athletes, so Bessie is running on a track for exactly N (1 ...
- BZOJ 3127 [Usaco2013 Open]Yin and Yang（树点分治）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3127 [题目大意] 给出一棵01边权树,求存在多少条路径,使得路径上0和1的数量相同, ...
- BZOJ 1150 [CTSC2007]数据备份Backup（贪心+优先队列）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1150 [题目大意] 给出n个数,请你挑出k对(每个数不可重复选取),使得他们差的绝对值 ...
- 浅谈js对象及对象属性
对象: ECMA-262把对象定义为 :无序属性的集合,其属性可以包含基本值,对象或者函数. 严格来讲,这就相当于说对象是一组没有特定顺序的值.对象的每一个属性或方法都有一个名字,而每个名字都映射到一 ...
- 配置友盟最新SDK遇到的问题
编译报错 Undefined symbols for architecture i386:原因:i386是代表模拟器,显示i386错误说明静态库不支持模拟器,只支持真机.友盟最新SDK可能不支持模拟 ...
- CentOS 6.9下KVM虚拟机网络Bridge（网桥）方式与NAT方式详解（转）
摘要:KVM虚拟机网络配置的两种方式:NAT方式和Bridge方式.Bridge方式的配置原理和步骤.Bridge方式适用于服务器主机的虚拟化.NAT方式适用于桌面主机的虚拟化. NAT的网络结构图: ...
- CentOS 6.9下配置安装KVM
注意:KVM一切安装和运行都是在root用户下完成的,并且只有root才能支持某些软件. 一.准备工作: 1.查看系统版本.内核版本 ##查看系统版本 # cat /etc/redhat-releas ...
- ARM地址重映射机制
转:http://blog.csdn.net/yuanzhangmei1/article/details/8395028 ARM体系结构中,系统上电或复位后,处理器将从地址0x0处取第一条指令,因此, ...