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 ...
随机推荐
- apache2.4 +django1.9+python3+ubuntu15.10
这是我这几天学习部署django的总结,中间出现了不少的问题.特此记录下来,用来复习巩固,同时也希望给想学习的同学一些参考. 第一步:我在ubuntu上装的是python3.sudo apt-get ...
- Python(2.7.6) 标准日志模块 - Logging Configuration
除了使用 logging 模块中的 basicConfig 方法配置日志, Python 的 logging.config 模块中, dictConfig 和 fileConfig 方法分别支持通过字 ...
- ASP.NET不拖控件教程(1)－认识JSON
我讲讲脱离ASP.NET控件必备的一步,JSON和使用JQuery获取JSON吧! 高手跳过,写给学习中的人的.这篇帖子是假设你会使用JQuery(JQ这么普及,应该不至少没学过吧!真没学过以后再开帖 ...
- 2014.10.09 Andrew 学习 WPF（刘铁锰） 笔记分享
引言 主要是讲了关于WPF只是表现层的工具. 第一章: XAML : 可扩张应用程序标记语言 Extensible Application Markup Language 什么是XAML? X ...
- CCNA长语
思科认证网络支持工程师(Cisco Certified Network Associate_CCNA) 专业英文词汇大全 10BaseT-----原始IEEE802.3标准的一部分,1OBaseT是1 ...
- log4net自定义字段写入SqlServer数据库 ASP.net
首先申明,本示例经过本作者亲自试验通过,可以运行 第一步 编写log4net配置文件 此处为Log.xml,该文件放在与Web.config平级的位置 <?xml version="1 ...
- iOS6定位服务编程详解
现在的移动设备很多都提供定位服务,使用iOS系统的iPhone.iPod Touch和iPad都可以提供位置服务,iOS设备能提供3种不同途径进行定位:Wifi, 蜂窝式移动电话基站, GPS卫星 i ...
- 正确的安装和使用nvm
前言 目前主流的node版本管理工具有两种,nvm和n.两者差异挺大的,具体分析可以参考一下淘宝FED团队的一篇文章: 管理 node 版本,选择 nvm 还是 n? 总的来说,nvm有点类似于 Py ...
- WEB-INF简介
WEB-INF简介 WEB-INF是Java的WEB应用的安全目录.所谓安全就是客户端无法访问,只有服务端可以访问的目录. 如果想在页面中直接访问其中的文件,必须通过web.xml文件对要访问的文件进 ...
- js 字符串“123”,变成整数123，不用parseInt 函数
var s = "123"; console.log(s.charAt(0)*100+s.charAt(1)*10+s.charAt(2)*1);