关于JQuery中的事件冒泡
什么是事件冒泡？
事件冒泡就是当父元素和子元素存在同一事件时在子元素的事件处理程序中会自动调用其父级元素的事件处理程序。
demo：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>事件冒泡</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function () {
$("#div").click(function () {
$(this).text("我是div");
});
$("#img").click(function () {
$(this).parent().css("border", "1px solid red");
});
})
</script>
</head>
<body>
<div id="div">
<img id="img" src="images/gd.jpg" />
</div>
</body>
</html>
当点击div下的img元素时界面效果如图：
通过上面代码我们只是想当鼠标点击图片时让div的边框成红色并没有要删除图片，但他在执行子元素（img)的事件处理程序时自动调用了父级元素（div）这就是事件冒泡。
如何取消事件冒泡？
事件冒泡是可以由程序员手工取消的也就是在子元素的事件处理程序中手动的停止调用父级元素
demo：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>事件冒泡</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function () {
$("#div").click(function () {
$(this).text("我是div");
});
$("#img").click(function () {
$(this).parent().css("border", "1px solid red"); event.stopPropagation();});
})
</script>
</head>
<body>
<div id="div">
<img id="img" src="images/gd.jpg" />
</div>
</body>
</html>
如上所示代码就可以取消事件冒泡
demo：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>事件冒泡</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function () {
$("#div").click(function () {
if( event.target == event.currentTarget){
$(this).text("我是div");
}
});
$("#img").click(function () {
if( event.target == event.currentTarget){
$(this).parent().css("border", "1px solid red");
}
});
}) </script>
</head>
<body>
<div id="div">
<img id="img" src="images/gd.jpg" />
</div>
</body>
</html>
这种方法也能解决上述问题单其并没有停止事件冒泡他判断其事件的触发元素和当前元素是否是同一个元素如果是则执行处理代码，如果不是则不执行处理代码，但事件还是会逐级向上冒泡直到body元素为止
关于JQuery中的事件冒泡的更多相关文章
- jquery 中的事件冒泡
废话少说,先来一段代码热热身: <!DOCTYPE html> <html> <head> <title>demo</title> < ...
- 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 中的事件冒泡和阻止默认行为
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()
随机推荐
- java格式化时间到毫秒
转自:https://blog.csdn.net/iplayvs2008/article/details/41910835 java格式化时间到毫秒: SimpleDateFormat formatt ...
- [Tomcat]Tomcat安全设置
1.关闭服务器端口:server.xml默认有下面一行: <Server port="8005" shutdown="SHUTDOWN"> 这样允许 ...
- Codeforces Round #283 (Div. 2) A
解题思路:给出一个递增数列,a1,a2,a3,-----,an.问任意去掉a2到a3之间任意一个数之后, 因为注意到该数列是单调递增的,所以可以先求出原数列相邻两项的差值的最大值max, 得到新的一个 ...
- ZBrush软件特性之Layers
ZBrush®中的Layers层调控板可以在单个文档工作中添加多个层,实际上是把新建的层作为一个分离的文档,层之间可以相互影响. 使用层工作 Layers调控板为每个层都有预置存放的空间,刚启动ZBr ...
- Pyhton学习——Day27
# hasattr(obj,'name')-->obj.name# getattr(obj,'name',default = 'xxx')--->obj.name# setattr(obj ...
- easyUI datagarid单元格动态合并
第二列根据第一列合并,第三列根据第二列合并.层级关系. /* * tableID表格的id * colList要合并的字段例如:"overcount,totalcount" */ ...
- windows编程ASCII问题
在CMD中输入CHCP可查看当前使用代码 输入CHCP 65001为UTF-8
- 【BZOJ 1433】[ZJOI2009]假期的宿舍
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 把每个人都分为左边和右边两个人 xi,yi 如果第i个人不回家或者是外校学生 那么它可以和他认识的人连一条容量为1的边(前提是这个认 ...
- H2数据库入门使用
H2数据库入门使用 学习了: https://www.cnblogs.com/xdp-gacl/p/4171024.html http://www.cnblogs.com/xdp-gacl/p/417 ...
- iOS开发中的NSDateFormatter日期格式解析总结
在工作中,常常遇到将时间解析出来转换成自己相应要求的时间格式,之前也有收集相应的转换格式,如今将自己收集的一部分了做个分享,应该比較完好了,欢迎大家继续补充 年 y 将年份 (0-9) 显示为不带前导 ...