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上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
随机推荐
- 最简单的Web Service实现
概述 这里提供一个最简单的Web Service的实现,基于JAX-WS.除了jdk不需要任何其他jar包,使用Eclipse提供的Web Services Explorer访问服务. 服务端的实现 ...
- Codeforces Round #113 (Div. 2) Tetrahedron（滚动DP）
Tetrahedron time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...
- Linux命令之who
who [选项] … [FILE | ARG1 ARG2] 打印有关当前登录用户的信息. (1).选项 -a,--all 同-b –d –login –p –r –t –T -u -b,--boot ...
- Java小对象的解决之道——对象池（Object Pool）的设计与应用
一.概述 面向对象编程是软件开发中的一项利器,现已经成为大多数编程人员的编程思路.很多高级计算机语言也对这种编程模式提供了很好的支持,例如C++.Object Pascal.Java等.曾经有大量的软 ...
- 【20181020T1】蛋糕
题面 [正解] 显然先按a排个序,然后用b乱搞 第一问用D开头的定理求最长下降子序列 第二问乱搞 for (int i=1;i<=n;i++) { int* t=upper_bound(f+1, ...
- [NOIp2017提高组]宝藏
#include<cstdio> #include<cctype> #include<algorithm> inline int getint() { regist ...
- SQL 中 HAVING 用法
现在 Student表有 如下数据 现需求如下: 查找每个老师的学生的平均年龄且平均年齿大于12 不使用 HAVING SELECT * FROM (SELECT TeacherID, AVG(Age ...
- 浅析HashMap和Hashtable的区别
HashMap和Hashtable两个类都实现了Map接口,二者保存键值对(key-value对): HashMap和HashTable区别 第一,继承的父类不同.HashMap继承自Abstract ...
- CSS写作建议和性能优化总结（未完待续）
这里是我从网上的一篇文章看过来的,这里先做一点小结,之后再补充. 1.CSS渲染规则 今天在微博的一篇文章上看到的,之前我都以为渲染是从左往右渲染.发现我的想法是错的.之所以采用从右往左的渲染规则,是 ...
- [转]MySQL更改用户密码
grant all privilegeson *.* to root@'localhost'identified by 'root'with grant option; grant all privi ...