jquery冒泡及阻止
javascript, jquery的事件中都存在事件冒泡和事件捕获的问题，下面将两种问题及其解决方案做详细总结。
事件冒泡是一个从子节点向祖先节点冒泡的过程；
事件捕获刚好相反，是从祖先节点到子节点的过程。
给一个jquery点击事件的例子：
代码如下：
<meta charset="utf-8">
<title>test</title>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$('#clickMe').click(function(){
alert('hello');
});
$('body').click(function(){
alert('baby');
});
});
</script>
</head>
<body>
<div style="width:100px;height:100px;">
<button type="button" id="button2">click me</button>
<button id="clickMe">click</button>
</div>
</body>
</html>
事件冒泡现象：点击 “id=clickMe” 的button,会先后出现“hello” 和 “baby” 两个弹出框。
分析：当点击 “id=clickMe” 的button时，触发了绑定在button 和 button 父元素及body的点击事件，所以先后弹出两个框，出现所谓的冒泡现象。
事件捕获现象：点击没有绑定点击事件的div和 “id=button2” 的button, 都会弹出 “baby” 的对话框。
在实际的项目中，我们要阻止事件冒泡和事件捕获现象。
阻止事件冒泡方法：
法1：当前点击事件中return false;
alert('hello');
return false;
});
法2：
alert('hello');
var e = window.event || event;
if ( e.stopPropagation ){ //如果提供了事件对象，则这是一个非IE浏览器
e.stopPropagation();
}else{
//兼容IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
});
貌似捕获事件不能被阻止
jquery冒泡及阻止的更多相关文章
- jQuery冒泡事件阻止
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- jQuery中事件对象e的事件冒泡用法示例（事件冒泡与阻止冒泡）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js /jquery停止事件冒泡和阻止浏览器默认事件
1>js阻止冒泡事件 var el = window.document.getElementById("a"); el.onclick = function (e) { // ...
- Javascript和jquery事件--阻止事件冒泡和阻止默认事件
阻止冒泡和阻止默认事件—js和jq相同,jq的event是一个全局的变量 我们写代码的时候常用的都是事件冒泡,但是有的时候我们并不需要触发父元素的事件,而浏览器也有自己的默认行为(表单提交.超链接跳转 ...
- Js 冒泡事件阻止
Js 冒泡事件阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...
- Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理
Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理 1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...
- jQuery中怎样阻止后绑定事件
你的代码在页面载入过程中已经完成事件绑定了,没有阻止后绑定的事件的办法了,不过可以删除当前指定节点的事件绑定.方法如下:$("#btn").click(function(){if( ...
- JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...
- 处理事件冒泡，阻止默认事件工具类，兼容IE
//处理事件冒泡,阻止默认事件工具类,兼容IEvar eventUtil={ // 添加句柄 addHandler:function(element,type,handler){ if(element ...
随机推荐
- 你有没有试过“闭上眼”使用：京东、滴滴、QQ、支付宝？
正在看这篇文章的同学,也许是幸运的. 互联网的发展,让我们的生活越来越便利,但这个“我们”,也许并不包括那些残障人士.正常人眼里来说再简单不过的页面操作,对于盲人来说都是不可攀越的高墙.换句话说,越行 ...
- POJ 3422 Kaka's Matrix Travels K取方格数
题目:给出n*n的方格矩阵,现在从左上方走m次到右下方,问m次能够获得的最大价值和. 分析:最大费用流.拆点进行限制每个格子只取一次,假设点x拆成 x,xx,右边(假设有)y,yy,下方(假设有)z, ...
- 转: javaWeb学习总结(见过最好的知识合集，相当给力，强烈推荐)
转: http://www.cnblogs.com/xdp-gacl/tag/JavaWeb%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93/default.html?page ...
- 获取IOS bundle中的文件
在xcode中选择bundle中的文件,右键Show in Finder即可拷贝或删除文件.
- 关于ios项目沙盒中的文件和Xcode项目创建的文件
//1.1获取在Xcode项目打开的情况下创建的Plist文件 NSString *path = [[NSBundle mainBundle]pathForResource:@"Profes ...
- c#数组乱序，打乱数组
按照random随机给出的index,进行两两交换,当然也存在与上一次一样的数组结果.官方还有一种ICompare的比较器,只是打乱顺序这个没用起来,不知道该怎么搞,╮(╯_╰)╭ public st ...
- 拓展开源库SwipeToLoadLayout实现EmptyView和Empty时自动禁用LoadMore
Android应用开发中,经常需要使用到界面的下拉刷新和上拉加载,在support v7之前,一般都是用ListView去做列表视图,而ListView对EmptyView是提供支持的,并且有许多开源 ...
- 【网络收集】如何修改vs tfs的登录名和密码 .
连接TFS时,如果本机保存了用户的网络密码,不会出现用户名和密码的输入框,若要更换TFS的用户名和密码,需按以下步骤操作:控制面板--->用户账号--->管理网络密码,此时会列出所有保存了 ...
- hexo搭建静态博客
1. 环境环境 1.1 安装Git 请参考[1] 1.2 安装node.js 下载:http://nodejs.org/download/ 可以下载 node-v0.10.33-x64.msi 安装时 ...
- java中vector与hashtable操作详解
众所周知,java中vector与hashtable是线程安全的,主要是java对两者的操作都加上了synchronized,也就是上锁了.因此 在vector与hashtable的操作是不会出现问题 ...