你知道JQuery中的事件冒泡吗，他是怎么执行的，如何来停止冒泡事件？
事件冒泡
首先需要知道什么是事件冒泡？
事件冒泡是从里面的往外面开始触发的，就是点击子节点，会向上触发父节点，祖先节点的点击事件
demo：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4-4-1</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} body {
font-size: 13px;
line-height: 130%;
padding: 60px;
} #content {
width: 220px;
border: 1px solid #0050D0;
background: #96E555;
} span {
width: 200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
} p {
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script src="../scripts/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 为span元素绑定click事件
$('span').bind("click", function () {
$("#msg").append("<p>内层span元素被点击.<p/>")
});
// 为div元素绑定click事件
$('#content').bind("click", function () {
$("#msg").append("<p>外层div元素被点击.<p/>")
});
//// 为body元素绑定click事件
$("body").bind("click", function () {
$("#msg").append("<p>body元素被点击.<p/>")
});
})
</script>
</head>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div> <div id="msg"></div>
</body>
</html>
当点击内层的span事件时，外层的div事件和body，也会执行的。
如何阻止冒泡事件？
一般来说有三种方法：
- 使用stopstopPropagation；
- 使用retrun false;
- 使用阻止默认行为preventDefault；
1.使用stopstopPropagation
只需要在后面加入event.stopPropagation();就可以阻止事件冒泡
$('span').bind("click", function () {
$("#msg").append("<p>内层span元素被点击.<p/>")
event.stopPropagation();
});2.使用retrun false；
$('span').bind("click", function () {
$("#msg").append("<p>内层span元素被点击.<p/>")
return false;
});3.使用阻止默认行为
retrun false和 stopstopPropagation的区别
return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。
event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。
你知道JQuery中的事件冒泡吗，他是怎么执行的，如何来停止冒泡事件？的更多相关文章
- jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画
地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...
- jquery中，使用append增加元素时，该元素的绑定监听事件失效
举例:如果在一个<div id="resultArea"></div>中,通过append添加一个id="checkOutTip"的文本 ...
- jquery中，使用append增加新元素时，新增元素的绑定监听事件失效的解决办法
$("outerSelector").on("eventType","innerSelector",function(){}); 举例:如果 ...
- 第三章 jQuery中的事件与动画
第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...
- JQuery制作网页—— 第七章 jQuery中的事件与动画
1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...
- jQuery中事件与动画
jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...
- jQuery中的事件与动画 笔记整理
一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.window事件.表单事件.事件的绑定和处 ...
- 使用jQuery快速高效制作网页交互特效----jQuery中的事件与动画
jQuery中的事件 和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现. 事件在元素对象与功能代码中起着重要的桥梁作用. 在JQuery中,事件 ...
- jquery中获取当前点击对象
jquery中获取当前点击对象的简单方法就是,在点击事件click中传入event对象 click(function(event)); 调用当前对象就是$(event.target);
随机推荐
- <form> 标签的 enctype 属性
值 描述 application/x-www-form-urlencoded 在发送前编码所有字符(默认) multipart/form-data 不对字符编码.在使用包含文件上传控件的表单时,必须使 ...
- 数据结构复习之C语言指针与结构体
数据结构指针复习: #include <stdio.h> void main() { ] = {, , , , }; // a[3] == *(3+a) printf(+a)); // a ...
- 视觉库—OpenCV
视频会议软件的视频质量除了与外置设备.编码器相关外,还与视频的后处理技术相关,视频图像通过后处理技术,如图像增强.图像去噪等,图像质量会得到主观上较大的提高.而我们通常的视频后处理技术会采用开源的项目 ...
- PLC-Heart
- win7上装红米4手机驱动提示空间不足
首先说:小米的垃圾支持.我在支持页面上看着 miuiV4或V5版本,再看我手机上9.5的版本.就感觉有些不妙. 下载下来后,点击安装程序,提示我安装空间不足......我F盘可用空间140G,不够你造 ...
- windows下使用xerces -c解析XML
windows下使用Xerces-C++解析XML 前景提要 最近工作中遇到收到的数据为xml格式的情况,考虑到xml解析应该是个很常用的功能,应该有开源的lib库可以使用,于是就在网上找了找,果然发 ...
- WAKE-WIN10-SOFT-MATio
1,matio Matio is an open-source C library for reading and writing binary MATLAB MAT files. This libr ...
- ThinkPHP5专题
TinkPHP5中 1. model中select()后的查询结果是对象而不是数组 2. model中 假如有 $result=$this->field($fields)->where($ ...
- 织梦Dedecms主要文件夹目录及模板文件说明
虽然织梦DedeCMS因为安全问题被人所诟病,但瑕不掩瑜,无论从用户群数量还是时间等各方面,织梦DedeCMS都是国内排名前几的CMS建站程序.如果你想学习CMS的二次开发,织梦DedeCMS是必须需 ...
- @Modules( ... ) 多个包路径问题
如何支持多个包路径,modules不在同一个报名下 @Modules(scanPackage = true, packages = "cn.wizzer.modules, com.xxx.m ...