jq 事件冒泡总结
什么是JS事件冒泡?
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。
如何来阻止Jquery事件冒泡?
通过一个小例子来解释
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Porschev---Jquery事件冒泡</title>
<scriptsrc="jquery-1.3.2-vsdoc.js"type="text/javascript"></script>
</head>
<body>
<formid="form1"runat="server">
<divid="divOne"onclick="alert('我是最外层');">
<divid="divTwo"onclick="alert('我是中间层!')">
<aid="hr_three"href="http://www.baidu.com"mce_href="http://www.baidu.com"onclick="alert('我是最里层!')">点击我</a>
</div>
</div>
</form>
</body>
</html>
比如上面这个页面,
分为三层:divOne是第外层,divTwo中间层,hr_three是最里层;
他们都有各自的click事件,最里层a标签还有href属性。
运行页面,点击“点击我”,会依次弹出:我是最里层---->我是中间层---->我是最外层---->然后再链接到百度.
这就是事件冒泡,本来我只点击ID为hr_three的标签,但是确执行了三个alert操作。
事件冒泡过程(以标签ID表示):hr_three---->divTwo---->divOne。从最里层冒泡到最外层。
如何来阻止?
1.event.stopPropagation();
$(function(){
$("#hr_three").click(function(event){
event.stopPropagation();
});
});
<script>
再点击“点击我”,会弹出:我是最里层,然后链接到百度
2.returnfalse;
如果头部加入的是以下代码
$(function(){
$("#hr_three").click(function(event){
returnfalse;
});
});
<script>
再点击“点击我”,会弹出:我是最里层,但不会执行链接到百度页面
由此可以看出:
1.event.stopPropagation();
事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转)
2.returnfalse;
事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转)
还有一种有冒泡有关的:
3.event.preventDefault();
如果把它放在头部A标签的click事件中,点击“点击我”。
会发现它依次弹出:我是最里层---->我是中间层---->我是最外层,但最后却没有跳转到百度
它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)
jq 事件冒泡总结的更多相关文章
- jq事件冒泡问题
在程序中使用事件对象非常简单,只需为函数添加一个参数,jquery代码如下: $("element").bind("click",function(event) ...
- jq的事件冒泡
在页面上可以有多个事件,也可以多个元素响应同一件事, 事件冒泡引发的问题: 有些时候不想动用的事件,却因为事件冒泡而触发 解决问题: 1.事件对象 由于IE-DOM和标准的DOM实现事件对象的方法各不 ...
- 事件冒泡的应用——jq on的实现
曾对jQuery中on的实现有所疑问,一直没有找到合适的实现方法,今日看<javascript高级程序设计>中的事件冒泡有了些思路. 针对于新增的DOM元素,JQ中若为其绑定事件就必须使用 ...
- jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载
jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
- jq事件
1,ready:当DOM载入就绪可以查询及操纵时绑定一个要执行的函数,在使用之前必须确保body元素的onload事件,,没有注册函数,否则不会触发ready函数. $(document).ready ...
- jq 事件取消绑定与重新绑定
前端有时会碰到这样的需求: 点击某个元素发送ajax请求, 发送期间此元素的鼠标相关事件(比如点击)无效, 发送完成鼠标点击事件功能恢复, 对于这种需求, 我们会遇到两种情况, 一种是点击的按钮为fo ...
- JS中的事件冒泡——总结
一. 有话要说 事件冒泡这个话题已经被园子里的朋友说透了,已经没什么要讲的了,但是由于呢我这边有个小问题刚好跟这个事件冒泡有关,就突然性想写个总结:一方面是给自己增加印象,另一方面给园子的新手们,提供 ...
随机推荐
- cf D. Maximum Submatrix 2
http://codeforces.com/contest/376/problem/D 题意:给你一个矩阵,可以随意排列n行的次序,然后找出全部含有1的子矩阵.输出1的个数. 思路:c[i][j]表示 ...
- Vista UAC下应用程序标注为“需要管理员权限”的四种方法
在Microsoft 的UACBlog里对此有过叙述.总结如下: 首先,如果一个程序被识别为管理员程序时,Vista会在它的图标上加上一个盾牌标记.因此很容易看出来. 其次,如果UAC有效的话,管理员 ...
- Actor模型
Actors模型(Actor model)首先是由Carl Hewitt在1973定义, 由Erlang OTP (Open Telecom Platform) 推广,其 消息传递更加符合面向对象的原 ...
- JAVA首选五款开源Web开发框架
Spring Spring是一个开源的Java/Java EE全功能栈应用程序框架,在JavaEE社区中非常受欢迎,以Apache许可证形式发布,也有.NET平台上的移植版本. Struts2 Str ...
- -_-#Android版QQ浏览器广告过滤
省流加速 - 广告过滤 默认开启 设别广告是添加的标签最外层标签带有adv download
- HBase MemStoreFlusher
HBase MemStore Flush由类org.apache.hadoop.hbase.regionserver.MemStoreFlusher实现,具体表现为HRegionServer中的一个实 ...
- Intellij IDEA 14隐藏被排除的文件夹
被排除的文件和文件夹以红色显示了. 看着这东西,人一下子就不好了. 还好设置可以改回来. Project tab右上角齿轮,关闭“Show Excluded Files”即可.
- Java学习日记 I/O
File类1.String[] list() 返回一个目录下文件和文件夹路径的字符串数组2.File[] listFiles() 以File类对象数组,返回目录下的所有文件和文件夹3.isDirect ...
- JDK 和JRE的区别
JRE:Java Runtime Environment/Java运行时环境目标用户:只需要运行Java程序的用户JRE包含了:Deployment,User Interface Toolkits,I ...
- python模块之bsddb: bdb高性能嵌入式数据库 1.基础知识
转自:http://blog.csdn.net/zhaoweikid/article/details/1665741 bsddb模块是用来操作bdb的模块,bdb是著名的Berkeley DB,它的性 ...