jquery 中的事件冒泡
废话少说，先来一段代码热热身：
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<meta charset="utf-8">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
</body>
<script>
$(function(){
//位span元素绑定click事件
$("span").click(function(){
var txt = $('#msg').html()+"<p>内层span元素被击中</p>";
$("#msg").html(txt);
});
//位div元素绑定click事件
$("#content").click(function(){
var txt = $("#msg").html()+"<p>外层的div元素被击中</p>";
$("#msg").html(txt);
})
//为body元素绑定click事件
$("body").click(function(){
var txt = $("#msg").html()+"<p>body元素被击中</p>";
$("#msg").html(txt);
})
})
</script>
</html>
网页上有两元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时<body>元素上也绑定了click事件。
当单击内部的<span>元素，即触发<span>元素的click事件时，会输出3条记录，如图所示：
只单击内部的<span>元素，就会触发<div>元素和<body>元素上的click事件，这就是由于事件冒泡引起的。
在单击<span>元素的同时，也单击了包含<span>元素的<div>元素和包含<div>元素的<body>元素，并且每一个元素都会按照特定的顺序响应click事件。
为了解决这一问题，我们在这里得提到“事件对象”这一概念：
$("element").bind("click",function(event){ //event：事件对象
})；
这样，当单击“element”元素时，事件对象就被创建了。这个事件对象只有事件处理函数才能够访问到。事件处理函数执行完毕之后，事件对象就被销毁。
停止事件冒泡：
停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在jquery中提供了stopPropagation()方法来停止事件冒泡。
$("span").bind("click",function(event){
var txt = $('#msg').html()+"<p>内层span元素被击中</p>";
$("#msg").html(txt);
event.stopPropagation(); //停止事件冒泡
})
这样，当单击<span>元素时，就只会输出相应的内容，而不会输出其他内容。你也可以试着给<div>元素加上该方法，效果一定不错哦！！！
jquery 中的事件冒泡的更多相关文章
- jQuery中的事件冒泡
1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...
- JQuery中阻止事件冒泡的两种方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- JQuery中阻止事件冒泡方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function( ...
- 在jQuery中解决事件冒泡问题
<pre name="code" class="html">事件会按照DOM层次结构像水泡一样不断向上直至顶端 解决方法:在事件处理函数中返回fal ...
- 你知道JQuery中的事件冒泡吗，他是怎么执行的，如何来停止冒泡事件？
事件冒泡 首先需要知道什么是事件冒泡? 事件冒泡是从里面的往外面开始触发的,就是点击子节点,会向上触发父节点,祖先节点的点击事件 demo: <html xmlns="http://w ...
- 关于JQuery中的事件冒泡
什么是事件冒泡? 事件冒泡就是当父元素和子元素存在同一事件时在子元素的事件处理程序中会自动调用其父级元素的事件处理程序. demo: <!DOCTYPE html> <html xm ...
- jQuery 中的事件冒泡和阻止默认行为
1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...
- 【jQuery】jQuery中的事件捕获与事件冒泡
在介绍之前,先说一下JavaScript中的事件流概念.事件流描述的是从页面中接受事件的顺序. 一.事件冒泡( Event Bubbling) IE 的事件流叫做事件冒泡,即 ...
- jquery中怎样防止冒泡事件
jquery中怎样防止冒泡事件 1.利用event.stopPropagation() 2.利用return false 3.利用event.preventDefault()
随机推荐
- C#-WinForm-布局-Anchor-锁定布局、Dock-填充布局、工具箱中的<容器>
Anchor - 锁定布局,锁定控件对于其父控件或窗体的位置,保持与边框固定的距离还是居中等 Dock - 填充布局,控件是否如何进行填充 ============================== ...
- python面试大全
问题一:以下的代码的输出将是什么? 说出你的答案并解释. class Parent(object): x = 1 class Child1(Parent): pass class Child2(Par ...
- 让Chrome支持Ajax/$http方式读取本地文件
在开发中经常写些小demo调试一下插件什么的 数据源又经常手动构造分离为一个单独的文件.用ajax或$http去访问时总是拒绝访问.这个时候可以给Chrome的快捷图标加启动参数,让浏览器允许js访问 ...
- 【POJ 3177】Redundant Paths（边双连通分量）
求出每个边双连通分量缩点后的度,度为1的点即叶子节点.原图加上(leaf+1)/2条边即可变成双连通图. #include <cstdio> #include <cstring> ...
- Android成长日记日记-Debug调试程序
Debug调试程序: 1. 调试是程序员无法逃避的工作.调试方法有很多种,但归根结底,就是找到印发错误的代码 2. Debug调试可以快速准确的定位到错误问题的位置,以及它的调用关系 3. Debug ...
- PhyLab2.0需求与功能分析改进文档（NABCD）
PhyLab1.0需求规格说明文档 1. 概述 1.1 项目概述 软剑攻城队小组于2015学年开发了PhyLab物理实验网站,一经发布好评如潮.网站的核心功能是提供预习报告和自动数据处理,而后加入了论 ...
- css居中那点事儿
css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...
- Apache Nutch v2.3 发布，Java实现的网络爬虫
http://www.oschina.net/news/59287/apache-nutch-2-3 Apache Nutch v2.3已经发布了,建议所有使用2.X系列的用户和开发人员升级到这个版本 ...
- LED数码管显示实验
1.代码: #include <reg52.h>typedef unsigned char u8;typedef unsigned int u16;sbit seg_sel = P1 ...
- apache无法正常启动，80端口被占用的解决方法
apache无法正常启动,80端口被占用的解决方法 网上的方法: 仔细查看提示: make_sock: could not bind to address 0.0.0.0:80 恍然大悟,计算机上安装 ...