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 ...
随机推荐
- winform登录时，在密码框按下回车，直接登陆
//按回车,焦点跳到密码文本框 private void txtUserName_KeyPress(object sender, KeyPressEventArgs e) { if (e.KeyCha ...
- 【转】处理新版Chrome书签、菜单字体不清晰
原文网址:http://www.nmgwddj.com/share/311.html 昨晚打开Chrome浏览器,忽然感觉有些什么东西变了,仔细看了半天忽然发现,书签中的字体和网页中右键的字体全部都变 ...
- 数据结构（跳跃表）：NOI 2004 郁闷的出纳员
郁闷的出纳员 [问题描述] OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复无常, ...
- OpenGL图形管线和坐标变换
转:http://blog.csdn.net/zhulinpptor/article/details/5897102 1. OpenGL 渲染管线 OpenGL渲染管线分为两大部分,模型观测变换(Mo ...
- cf702A Maximum Increase
A. Maximum Increase time limit per test 1 second memory limit per test 256 megabytes input standard ...
- Nodejs in Visual Studio Code 11.前端工程优化
1.开始 随着互联网技术的发展,企业应用里到处都是B/S设计,我有幸经历了很多项目有Asp.Net的,有Html/js的,有Silverlight的,有Flex的.很遗憾这些项目很少关注前端优化的问题 ...
- J - Fire!
题目大意: 这是一个放火逃生的游戏,就是给出来一个迷宫,迷宫里面有人‘J’和火焰‘F’当然这些火焰可能不止一处,然后问这个人最快从迷宫里面逃出来需要多久 /////////////////////// ...
- kafka Disks and Filesystem（磁盘和文件系统）
转载请注明来源地址:http://www.cnblogs.com/dongxiao-yang/p/5206631.html We recommend using multiple drives to ...
- curl 模拟ajax 请求
主要是在header请求里加一个 X-Requested-With: XMLHttpRequest curl -v -H "X-Requested-With: XMLHttpRequest ...
- 安卓四大组件之一activity
概要说明 Activity是Android组件中最基本也是最为常见用的四大组件(Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播 ...