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 ...
随机推荐
- 精通C#(第6版)
<精通C#(第6版)> 基本信息 原书名:Pro C# 5.0 and the .NET 4.5 framework,sixth edition 作者: (美)Andrew Troelse ...
- 手机端Post 数据
var data =""; using (StreamReader readStream = new StreamReader(context.Reques ...
- PHP将解析xml变为数组方法
最近想要做一个插件机制,需要用到xml,在解析xml时候需要转换为数组,特意记录一个此种解析方式 xml文件 <?xml version="1.0" encoding=&qu ...
- HTML_创建易用的Web表单
首先创建一个表单域集合fieldset fieldset元素允许Web开发者将主题相关的表单组合在一起 <fieldset></fieldset> 要说明的是本例子中每个表单都 ...
- 一.CSS工作原理
CSS全称层叠样式表,它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.是能够真正做到网页表现与内容分离的一种样式设计语言,能够对网页 ...
- 每天一道LeetCode--344. Reverse String
Write a function that takes a string as input and returns the string reversed. Example:Given s = &qu ...
- MarkFan的程序员客栈
历史上的今天:2013-12-27 跨平台移动开发 App-Framework DEMO 演示
- 英特尔实感SDK 代码示例
原文地址 摘要 本套代码示例针对巴西英特尔实感动手实验室创建,旨在帮助参与人员了解如何使用英特尔® 实感™ 软件开发套件. 12 个示例使用 C# SDK 包装程序,提供了简单的基于控制台的应用,支持 ...
- MySQL选择数据库use与mysql_select_db使用详解
在mysql中如果我们在命令模式下选择与切换数据库直接使用use即可,在php中选择数据使用mysql_select_db即可,下面我来介绍一下. 从命令提示符,选择MySQL数据库: 这 ...
- 关于柯尼卡美能达bizhub250出现c2557错误解决方法
打印机出现c2557代码的操作方法 1. 按效用/计数器键 英文是(Utility/Counter) 2. 看到有检查细息(Check Detail) 3. ...