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()
随机推荐
- json-jsonConfig使用
一,setCycleDetectionStrategy 防止自包含 /** * 这里测试如果含有自包含的时候需要CycleDetectionStrategy */ public static void ...
- 在编译向该请求提供服务所需资源的过程中出现错误。请检查下列特定错误详细信息并适当地修改源代码。 编译器错误消息: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\41c191fd\ff9345c5\App_Web_login.cshtml.65793277
本地开发环境没问题,但是发布到服务器出现问题或则直接在IIS上修改东西就给我抛出以下错误: 未能写入输出文件"c:\Windows\Microsoft.NET\Framework64 \v4 ...
- 安装完ActivePython后Python的Idle窗口打不开也卸载不掉的解决方法
1.想找一个好的PythonIDE开发环境所以就安装了ActivePython开发公具,结果发现软件打不开,机器上装的Python环境也不能用了,网上相关的解决方法也是寥寥无几...真悲催! 2.后来 ...
- random模块
如下 #!/usr/bin/env python # encoding: utf-8 import sys import platform print (platform.python_version ...
- TopCoder SRM 596 DIV 1 250
body { font-family: Monospaced; font-size: 12pt } pre { font-family: Monospaced; font-size: 12pt } P ...
- Microsoft Visual C++ 9.0 is required (Unable to find vcvarsall.bat)
在windows下使用python时,比如编译python的一个包,会遇到这个问题: error: Microsoft Visual C++ 9.0 is required (Unable to fi ...
- Gulp.js----比Grunt更易用的前端构建工具
Gulp.js----比Grunt更易用的前端构建工具 Grunt一直是前端构建工具,然而他也不是毫无缺陷的,gulp的作者 Eric Schoffstall 在他介绍 gulp.js 的 prese ...
- 洛谷P2746 [USACO5.3]校园网Network of Schools
题目描述 一些学校连入一个电脑网络.那些学校已订立了协议:每个学校都会给其它的一些学校分发软件(称作“接受学校”).注意即使 B 在 A 学校的分发列表中, A 也不一定在 B 学校的列表中. 你要写 ...
- Spring表单参数绑定中对“is”开头的boolean类型字段的的处理
之前在新浪微博上面发了一个微薄: 弱弱的发现在定义boolean类型的时候最好不要使用“is”开头,可以避免一些问题哦 然后有一些朋友朋友问我为什么,当时比较忙,现在写篇文章举一个例子,回复一下这个问 ...
- 关于adb连接手机offline的问题解决
win7-64位系统.对于windows系统,adb devices 显示offline一般可能有两个原因: 1 )端口被占用. 解决方式是:查找端口号,结束占用进程: adb nodaemon se ...