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 ...
随机推荐
- Oracle基础 shutdown和startup
一.shutdown命令:SHUTDOWN有四个参数:NORMAL.TRANSACTIONAL.IMMEDIATE.ABORT.缺省不带任何参数时表示是NORMAL. SHUTDOWN NORMAL: ...
- Myeclipse集成Jboss 6.1控制台不输出日志信息
在使用myeclipse+jboss 6.1开发的时候发现jboss能够正常启动但是myeclipse的控制台却没有任何的信息输出,这使得我没有办法开发,在查找了大部分的资料发现很多说要改什么jbos ...
- 用jquery 实现 超出字符 截断加上省略号并且可以提示全部内容
1.test.jsp Java代码 <%@ page language="java" pageEncoding="UTF-8"%> <html ...
- Table of Contents - ActiveMQ
Getting Started ActiveMQ 的安装 Hello World Configuring Standard ActiveMQ Components Connecting to Acti ...
- 【转载】理解OAuth 2.0
http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html 作者: 阮一峰 日期: 2014年5月12日 OAuth是一个关于授权(authorizat ...
- shell中使用echo命令改变输出显示样式
文本终端的颜色可以使用“ANSI非常规字符序列”来生成.举例:echo -e "\033[44;37;5m ME \033[0m COOL" 以上命令设置背景成为蓝色,前景白色,闪 ...
- 无法解决 equal to 运算中 "Chinese_PRC_CI_AS" 和 "Chinese_PRC_90_CI_AI" 之间的排序规则冲突。的解决方法
在SQL SERVICE的查询的时候遇到了“无法解决 equal to 运算中 "Chinese_PRC_CI_AS" 和 "Chinese_PRC_90_CI_AI&q ...
- 第二篇、Swift_自定义 tabbar 的 badgeValue显示样式
在实际的开发中,我们常常需要根据实际的需求,去改变bageValue的显示样式,默认是红色的背景,白色的字体颜色 使用方式: class BKTabBarController: UITabBarCon ...
- mysql 存储过程详解 存储过程
mysql存储过程详解 1. 存储过程简介 我们常用的操作数据库语言SQL语句在执行的时候需要要先编译,然后执行,而存储过程(Stored Procedure)是一组为了完成 ...
- 学习 AngularJS 第一天
AngularJS 高级程序设计 遇到问题:安装web服务器 var connect = require("connect"); connect.createServer( con ...