你知道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);
随机推荐
- vuejs源码摘抄（二）
创建一个用来观察对象的observe类,这个类会附加在被观察的对象上,并且把被观察对象的属性值转换成getter/setter,同时,收集依赖和分发更新,实现代码如下: /* * not type c ...
- C语言入门（一）环境搭建
1. 下载Code::Blocks(源文本编辑器) 2. 下载编译器MinGW(或者下载好自带编译器的codeblocks) http://jingyan.baidu.com/article/c843 ...
- MFCdll的两种调用方法
有同事问我mfcdll的掉用方法,这里总结了一下. 1 lib库调用 只要VS能找到dll对应的lib和h文件,就可以开发和调试.包含lib和h文件有两个方法. 第一种方法设置路径是 ...
- Stage1--Python的特点和安装
说在前面: Stage1-Stage4简单介绍一下Python语法,Stage5开始用python实现一些实际应用,语法的东西到处可以查看到,学习一门程序语言的最终目的是应用,而不是学习语法,语法本事 ...
- Android基础Activity篇——创建一个活动（Activity）
1.创建活动 首先用AS创建一个add no activity项目名使用ActivityTest,包名为默认的com.example.activitytest 2.右击app.java.com.exa ...
- Windows7建立无线热点
很实用的技巧,加以记录. 最初我是想使用connectify的,不过安装这个软件之后,发现有线账号登不上了,所以就选择使用Windows7自带的工具了. 首先以管理员身份运行cmd. 进入之后cd到c ...
- BIEE入门（一）架构
BIEE作为Oracle的新的商业智能平台企业版,起源于Oracle所收购的Siebel公司,BIEE原来叫做Siebel Analytic,但是Siebel也不是它的发明者,它是Siebel在200 ...
- Flask入门文件上传flask-uploads(八)
1 视图传递多个参数 (1) 普通传参 : 关键字参数传递 return render_template('模板名称.html',arg1=val1,arg2=val2...) (2) 字典传参 : ...
- STM32-F429ZIT6-关于驱动安装
第一步:下载驱动 1.个人百度云链接:http://pan.baidu.com/s/1dE8vxy5 密码:yow0 2.网站下载:这个还是直接百度吧. 第二步:驱动安装 注意:安装之前要先关闭安全监 ...
- python:生成器进阶
1,列表推导式 值 for 循环 2,生成器表达式 g=(i for i in range(10)) print(g) for i in g: print(i) 3,列表推导式与生成器表达式的区别 # ...