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上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
随机推荐
- coreseek mmseg分词配置和创建
1.文件格式为 沃尔沃 1x:1现代 1x:1徐工 1x:1住友 1 ... 3.将生成的符合格式要求的词表粘贴到原词表unigram.txt末尾,保存为unigram_new.txt,并拷贝到mms ...
- VB查询数据库之登陆窗体——机房收费总结（一）
机房收费系统已经做了很长一段时间了,虽然到目前为止,仍然没有结束,但已经结节尾声了.我感觉现在有必要回首总结一下整个机房收费系统. 除了结账做了一半,报表接触一点之外,其他的都基本上差不多了.从做过的 ...
- SD 一轮集训 day4 圣城鼠
非常强的构造题. 很显然的是我们要构造一个类似菊花图的东西,因为这样的话两点之间路径的点数会非常少,很容易满足第二个条件. 但是因为直接菊花图的话会不满足第一个条件,,,所以我们可以构造一个类菊花图. ...
- 【codevs1074】食物链
[codevs1074]食物链 2001年NOI全国竞赛 时间限制: 3 s 空间限制: 64000 KB 题目等级 : 钻石 Diamond 题目描述 Description 动物王国中有 ...
- 【推导】Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017) B. Arpa and an exam about geometry
题意:给你平面上3个不同的点A,B,C,问你能否通过找到一个旋转中心,使得平面绕该点旋转任意角度后,A到原先B的位置,B到原先C的位置. 只要A,B,C构成等腰三角形,且B为上顶点.那么其外接圆圆心即 ...
- Linux系统/etc/sysconfig目录下没有iptables文件
在新安装的linux系统中,防火墙默认是被禁掉的,一般也没有配置过任何防火墙的策略,所有不存在/etc/sysconfig/iptables文件. 解决办法: 1.键入以下命令,新建文件 2.复制以下 ...
- websocket+golang聊天室
原文地址: http://www.niu12.com/article/3 websocket+golang聊天室 main.go和index.html放在同一目录下 main.go package m ...
- Java读写文件，中文乱码解决
读文件:使用new BufferedReader(new InputStreamReader(new FileInputStream(file), "UTF-8")); Strin ...
- ylbtech-LanguageSamples-Versioning(版本控制)
ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-Versioning(版本控制) 1.A,示例(Sample) 返回顶部 “版本控制”示 ...
- ashx 下载文件
ashx后台 byte[] file =GetFileByte(""); Response.ContentType = "application/octet-stream ...