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 ...
随机推荐
- xe5 android listbox的 TMetropolisUIListBoxItem
listbox实现以下效果: 关键代码,采用数据集的方式 type PpatientData=^RpatientData; RpatientData= record patient_id:string ...
- linux中crontab和at
1. Red Hat的发行版本中,通常还可以使用工具ntsysv设置服务的自启动状态. #类似chkonfig 服务名 on|off 2.系统服务脚本目录:/etc/init.d 3.ps: -a:显 ...
- 转: 关于 ssl的建立链接的过程
转自: http://www.ruanyifeng.com/blog/2014/02/ssl_tls.html SSL/TLS协议运行机制的概述 作者: 阮一峰 日期: 2014年2月 5日 互 ...
- /var/spool/postfix/maildrop小文件太多造成inode索引使用完解决
/var/spool/postfix/maildrop 小文件太多造成inode索引使用完解决办法 问题表现和检查: 1.运行df -i / 查看inode使用是否满: 2.查看/var/spool/ ...
- freeCodeCamp:Missing letters
从传递进来的字母序列中找到缺失的字母并返回它. 如果所有字母都在序列中,返回 undefined. function fearNotLetter(str) { var arr = str.split( ...
- MVC 页面跳转
想要学习MVC,那么页面跳转就是必不可少的,在此我总结了常见的页面跳转方式,给自己理一下做个备份,也顺便和大家分享一下. 常见页面跳转的:(下面的视图名和控制器中的方法名一样) 在控制器内部跳转: / ...
- 转：C#写的WEB服务器
转:http://www.cnblogs.com/x369/articles/79245.html 这只是一个简单的用C#写的WEB服务器,只实现了get方式的对html文件的请求,有兴趣的朋友可以在 ...
- php生成 优惠券 激活码
/** * 生成vip激活码 * @param int $nums 生成多少个优惠码 * @param array $exist_array 排除指定数组中的优惠码 * @param int $cod ...
- Mac下配置cocos2dx2.2.6的Android环境
最近在学习cocos2dx在MAC上如何打包apk,今天先把安装JDK和ANT的过程记来. 首先,打开终端,输入”java -version” 点击回车后,出现如下提示: 我们的MAC上并没有安装过J ...
- CTG
服务端:一.修改IP地址AIX上CICS REGION的目录/var/cics_regions/your_region_name/database/LD二.修改文件LD.stanza中的IP地址三. ...