你知道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);
随机推荐
- java位运算之简单了解
1.十进制转化为二进制 将正整数转化为二进制的方法“除2取余,逆序排列”. 2.二进制转化为十进制 表示整数的二进制,第一位为标志位,0代表为正整数,位数从右开始,第一个位数为0,各位位数记作n,取各 ...
- C语言字符数组与字符串
研究几个案例: 输出图案: #include <stdio.h> void main() { ][] = { {', ' ', ' '}, {', ' '}, {'}, {', ' '}, ...
- sql注入一点小心得
好久没写技术博客,最近研究产品关于用户体验方面较多,加上项目突然比较多,设计原型.跟进开发.设计师等工作着实没时间写博客. 接下来技术上主要php深入学习和mysql优化.这两天看了关于sql注入方面 ...
- Qt删除文件夹
写的软件需要进行文件夹的复制,开始不怎么懂就找了个拷贝文件夹的代码测试了一下,运行程序选择了源目录和目标目录相同进行拷贝,结果悲剧了.因为是递归拷贝,导致文件夹被嵌套N层,软件死机,强制结束后,产生的 ...
- Java—IO流 File类的常用API
File类 1.只用于表示文件(目录)的信息(名称.大小等),不能用于文件内容的访问. package cn.test; import java.io.File; import java.io.IOE ...
- 分布式check_mk切换远端图片到本地访问
http://hermannsspace.de/wp/collect-pnp4nagios-data-in-check_mk-distributed-environment slave1数据目录 /o ...
- jquery：jqery表单属性 值操作
重置表单(且清空隐藏域) $('#myform')[0].reset() DOM属性相关操作 返回属性值 $(selector).attr(attribute) 设置属性值 $(selecto ...
- HCNA实验OSPF基础
1.拓扑图 方法: 1.配置接口IP 2.配置OSPF协议: [R2]ospf 100 [R2-ospf-100]area 0 [R2-ospf-100-area-0.0.0.0]network 12 ...
- Android（java）学习笔记50：通过反射获取成员变量和成员方法并且使用
1. 反射获取成员变量并且使用: (1)获取字节码文件对象: Class c = Class.forName("cn.itcast_01.Person"); (2) ...
- 网络体系结构的概念 - 网络协议TCP - 红黑联盟
https://i.cnblogs.com/EditPosts.aspx?opt=1 网络体系结构的概念 计算机网络就是一组通过一定形式连接起来的计算机系统,它需要四个要素的支持,即通信线路和通信设 ...