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中的事件冒泡——总结
一. 有话要说 事件冒泡这个话题已经被园子里的朋友说透了,已经没什么要讲的了,但是由于呢我这边有个小问题刚好跟这个事件冒泡有关,就突然性想写个总结:一方面是给自己增加印象,另一方面给园子的新手们,提供 ...
随机推荐
- 哎,就硬盘还不是最掉价的,1999的自配主机,VIRTUALBOX里虚拟机,聊以自慰吧。
安装时注意的问题,要是不测试MYSQL,则CONFIGURE参数和DISABLE-MYSQL,在编译时有提示的. 然后就是LIBTOOL包过老的问题,以及未安装LIBTOOL包的问题. 最后,是运行命 ...
- WIN32程序挂钩SetLastError,输出错误描述到控制台
WIN32程序挂钩SetLastError,输出错误描述到控制台 作者:徐灵甫 一.窗口模式应用程序(GUI)启用控制台的方法为: 步骤 方法 1 启动/关闭控制台 AllocConsole()Fre ...
- 【HDOJ】2440 Watch out the Animal
刚开始学随机算法,凸包+模拟退火. /* 2440 */ #include <iostream> #include <cstdio> #include <cstring& ...
- y combinator 做的一个调查_可以学习一下
RoR: 在网络营运平台企业中,RoR站稳使用率第一的位置.其用户包括:ZenPayroll (人力资源).Asile50 (零售平台).BackerKit (众筹平台).Rainforest (QA ...
- EDM(邮件营销)
官冲拉手网CTO举了个EDM(邮件营销)的例子: 在做大数据分析应用之前,通过EDM带来的订单转化率很低.在采用大数据解决方案后,可以根据用户之前的浏览习惯猜测他的喜好和购买习惯,从而针对性的推送个性 ...
- C++ BigInteger 大整数类模板(转)
#include <deque> #include <vector> #include <iostream> #include <string> #in ...
- 【3】JAVA---地址App小软件(AddPanel.class)(表现层)
添加地址信息界面. 年龄和地址必须是数字,否则会弹出窗口提示. 地址信息不能为空. /* * AddPanel.java * * Created on __DATE__, __TIME__ */ pa ...
- Ubuntu下配置smb服务器
一. samba的安装: sudo apt-get insall samba 二. 创建共享目录: mkdir /home/user/share sodu chmod 777 /home/user/s ...
- linux有用网址
正则表达式在线测试 http://tool.oschina.net/regex
- oracle用户解锁和改密
alter user hs_user account unlock; alter user hs_asset account unlock; alter user hs_his account unl ...