你知道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);
随机推荐
- access与excel
我们承认,Excel是伟大的,但却又不得不承认,Excel不是万能的,它至少在"多数据表关联"."数据处理自动化"."大量数据的处理"等方面 ...
- SQLite入门操作（一）
//++其他的头文件 #include "sqlite3.h" #pragma comment(lib,"sqlite3.lib") int GetItemCo ...
- javascript typeof()的用法与运算符用法
typeof 运算符 返回一个用来表示表达式的数据类型的字符串. typeof[()expression[]] ; expression 参数是需要查找类型信息的任意表达式. 说明 typeof 运算 ...
- UIRecorder安装与使用
继vue单元测试,将进行vue的e2e测试学习. 学习点: 安装uirecorder 用工具(UI Recorder)录制测试脚本 测试脚本的回放 本文意在安装UI Recorder,并且利用该工具进 ...
- JSP实现用户登录样例
业务描述 用户在login.jsp页面输入用户名密码登录: 如果用户名为xingoo,密码为123,则跳转到成功界面login_success.jsp,并显示用户登录的名字: 如果用户名密码错误,则跳 ...
- netstat 和 lsof 查看网络状态
netstat和lsof都是linux下的工具,可以用于查看系统的网络状态. netstat netstat可以打印 网络连接,路由表,接口统计数据,还有多播和masquerade连接相关的东西(不熟 ...
- pip pip._vendor.urllib3.exceptions.ReadTimeoutError: HTTPSConnectionPool
设置超时时间: pip --default-timeout=100 install Pillow
- 了解git /github
一 GIT是什么? Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.Git ...
- note04-计算机网络
4.WLAN无线局域网(wareless local area network) IEEE802.11无线以太网协议标准 基础服务集合BSS 基站AP 服务服务集合标识SSID 即wifi名 分配系统 ...
- Codeforces 225E 梅森素数
注:梅森素数,数组表示的是2^n-1的n,指数. #include <stdio.h> #include <math.h> ; ; typedef long long ll; ...