jQuery中事件冒泡问题及处理
在为一个元素添加事件时，经常会出现的一个问题就是事件冒泡。例如在div中嵌套了一个span元素，为div和span都添加了事件点击，如果点击span会导致span和div元素相继触发监听事件。顺序是从内到外。代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件冒泡演示</title>
<meta name="author" content="Administrator" />
<script src="script/jquery-1.12.2.js" type="text/javascript"></script>
<style type="text/css">
#content {
background-color: #0000FF;
}
#msg {
background-color: #FF0000;
}
</style>
<!-- Date: 2016-03-26 -->
</head>
<body>
<div id="content">
<p>
外层div元素
</p>
<span>内层span元素</span>
<p>
外层div元素
</p>
</div>
<div id="msg"></div>
<script type="text/javascript">
$(function() {
//对span元素添加事件
$("#content span").bind("click", function() {
var text = $("#msg").html()+"<p>内层span元素被点击！</p>";
$("#msg").html(text);
});
//对
$("#content").bind("click", function() {
var text = $("#msg").html()+"<p>外层div元素被点击！</p>";
$("#msg").html(text);
}); $("body").bind("click", function() {
var text = $("#msg").html()+"<p>body元素被点击！</p>";
$("#msg").html(text);
});
});
</script>
</body>
</html>
为了更好地解决这个问题，我们为事件中的function传入一个参数event，并且调用stopPropagation()方法
下面演示：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件冒泡演示</title>
<meta name="author" content="Administrator" />
<script src="script/jquery-1.12.2.js" type="text/javascript"></script>
<style type="text/css">
#content {
background-color: #0000FF;
}
#msg {
background-color: #FF0000;
}
</style>
<!-- Date: 2016-03-26 -->
</head>
<body>
<div id="content">
<p>
外层div元素
</p>
<span>内层span元素</span>
<p>
外层div元素
</p>
</div>
<div id="msg"></div>
<script type="text/javascript">
$(function() {
//对span元素添加事件
$("#content span").bind("click", function(event) {
var text = $("#msg").html()+"<p>内层span元素被点击！</p>";
$("#msg").html(text);
event.stopPropagation();
});
//对
$("#content").bind("click", function(event) {
var text = $("#msg").html()+"<p>外层div元素被点击！</p>";
$("#msg").html(text);
event.stopPropagation();
}); $("body").bind("click", function(event) {
var text = $("#msg").html()+"<p>body元素被点击！</p>";
$("#msg").html(text);
event.stopPropagation();
});
});
</script>
</body>
</html>
jQuery中事件冒泡问题及处理的更多相关文章
- JQuery中事件冒泡
JQuery中事件冒泡 定义 在一个对象上触发某类事件,就会执行此事件程序,如果没有处理事件就会向这个对象的父级对象传播 直至它被处理,最顶层老大为document对象. 作用 事件冒泡允许多个操作被 ...
- 恶补jquery(四)jquery中事件--冒泡
事件 当我们在打开一个页面的时候.浏览器会对页面进行解释运行,这实际上是通过运行事件来驱动的.在页面载入事件时,运行Load()事件,是这个事件实现浏览器解释运行代码的过程. 事件机制 事件中的冒泡现 ...
- Jquery阻断事件冒泡(转载)
JQuery阻止事件冒泡 冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个d ...
- jquery取消事件冒泡的三种方法展示
jquery取消事件冒泡的三种方法展示 html代码 <!doctype html> <html> <head> <meta charset="ut ...
- jQuery中事件对象e的事件冒泡用法示例（事件冒泡与阻止冒泡）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery中防止冒泡事件
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...
- JQuery阻止事件冒泡
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点 ...
- jQuery中事件绑定到bind、live、delegate、on方法的探究
1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...
- js阻止冒泡及jquery阻止事件冒泡示例介绍
js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...
随机推荐
- Ubuntu 12.04 使用Eclipse搭建C/C++编译环境
首先是安装Eclipse,方法有两种: 第一种是通过Ubuntu自带的程序安装功能安装Eclipse,应用程序->Ubtuntu软件中心,搜Eclipse安装即可. 第二 ...
- 动态规划(二维背包问题)：UVAoj 473
Raucous Rockers You just inherited the rights to n previously unreleased songs recorded by the pop ...
- SharePoint Server 2007 Enterprise Key
正式版 key SN: Tkjcb-3wkhk-2ty2t-qymk2-9xm2y 这个版本也是通过Key来区分是否是测试版还是正式版的 也就是说你输入正式版的Key他就是正式版,输入Enterpri ...
- Android从网络中获取xml文件并解析数据
public class XmlwebData { @SuppressLint("UseValueOf") public static List<Person> get ...
- 《University Calculus》-chaper13-向量场中的积分-线积分
线积分: 基于二重积分和三重积分的引入,我们对于线积分的引入过程将会轻车熟路. 对于一根不均匀密度的铜丝,我们如何求其总质量?如下图. 类似二重积分和三重积分的引入,我们首先基于实际问题给出黎曼和的形 ...
- Piotr's Ants UVa 10881
#include <cstdio> #include <cmath> #include <algorithm> #include <iostream> ...
- IOS面试题（虽然我们很少用）
其实我们会考很多C的基本知识,主要还是交流,这个题就是防止那些小白. 1.Objective-C中,与alloc语义相反的方法是dealloc还是release?与retain语义相反的方法是deal ...
- Hard 计算0到n之间2的个数 @CareerCup
一种是Brute force,O(nlogn) 另一种是找规律O(n),见http://hawstein.com/posts/20.4.html 当某一位的数字小于2时,那么该位出现2的次数为:更高位 ...
- android EditText中的inputType
android 1.5以后添加了软件虚拟键盘的功能,所以在输入提示中将会有对应的软键盘模式 android中inputType属性在EditText输入值时启动的虚拟键盘的风格有着重要的作用.这也大大 ...
- <<java 并发编程>>第七章：取消和关闭
Java没有提供任何机制来安全地终止线程,虽然Thread.stop和suspend等方法提供了这样的机制,但是存在严重的缺陷,应该避免使用这些方法.但是Java提供了中断Interruption机制 ...