JQuery中事件冒泡
JQuery中事件冒泡
定义
在一个对象上触发某类事件，就会执行此事件程序，如果没有处理事件就会向这个对象的父级对象传播 直至它被处理，最顶层老大为document对象。
作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上）
阻止事件气泡
事件气泡有时是不需要的 通过event.stopPropagation() 或者event.preventDefault()组织 ----合并写法：return false；
解决思路
假如页面中有一个模块1，模块1中有又一个模块2，模块2中有个模块3，如果点击模块3中的触发事件，如没有处理程序，他就会向模块2执行，模块2没有继续向模块1执行，此为一个冒泡事件，如果想在模块3就终止需要---return false
具体实例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.father {width: 500px;height: 500px;background: pink;}
.son {width: 250px;height: 250px;background: red; }
.grandson {width: 150px;height: 150px; background: gold;}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
<script>
$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son'); return false;
});
$box3.click(function(event) {
alert('grandson');
return false;
});
// $(document).click(function(event) {
// alert('grandfather');
// });
})
</script>
</head>
<body>
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>
</body>
</html>
易错点
return false 写在函数内部
JQuery中事件冒泡的更多相关文章
- 恶补jquery(四)jquery中事件--冒泡
事件 当我们在打开一个页面的时候.浏览器会对页面进行解释运行,这实际上是通过运行事件来驱动的.在页面载入事件时,运行Load()事件,是这个事件实现浏览器解释运行代码的过程. 事件机制 事件中的冒泡现 ...
- jQuery中事件冒泡问题及处理
在为一个元素添加事件时,经常会出现的一个问题就是事件冒泡.例如在div中嵌套了一个span元素,为div和span都添加了事件点击,如果点击span会导致span和div元素相继触发监听事件.顺序是从 ...
- Jquery阻断事件冒泡(转载)
JQuery阻止事件冒泡 冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个d ...
- jquery取消事件冒泡的三种方法展示
jquery取消事件冒泡的三种方法展示 html代码 <!doctype html> <html> <head> <meta charset="ut ...
- jQuery中事件对象e的事件冒泡用法示例（事件冒泡与阻止冒泡）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery中防止冒泡事件
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...
- JQuery阻止事件冒泡
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点 ...
- jQuery中事件绑定到bind、live、delegate、on方法的探究
1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...
- js阻止冒泡及jquery阻止事件冒泡示例介绍
js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...
随机推荐
- Python爬虫教程-11-proxy代理IP，隐藏地址（猫眼电影）
Python爬虫教程-11-proxy代理IP,隐藏地址(猫眼电影) ProxyHandler处理(代理服务器),使用代理IP,是爬虫的常用手段,通常使用UserAgent 伪装浏览器爬取仍然可能被网 ...
- 如何提高 Java 中锁的性能
锁不是问题的根源,锁之间的竞争才是 通常在多线程的代码中遇到性能方面的问题时,一般都会抱怨是锁的问题.毕竟锁会降低程序的运行速度和其较低的扩展性是众所周知的.因此,如果带着这种“常识”开始优化代码,其 ...
- C语言二级指针（指向指针的指针）
转载:http://c.biancheng.net/cpp/html/85.html 指针可以指向一份普通类型的数据,例如 int.double.char 等,也可以指向一份指针类型的数据,例如 in ...
- ajax的content-download时间过慢问题的解决与思考
其次,查看出现延迟问题的业务页面和不出现延迟的业务页面对这一组件的调用区别. 通过对比,也没有发现两个组件有何不同.(故这一奥秘,有兴趣的同学可以联系我一起讨论.....我可以把源码发给你) 经过多次 ...
- zabbix_3.0安装部署与中文支持
Zabbix 3.0界面焕然一新,一改10多年的老面孔,alpha4的更新具体记录如下:http://www.zabbix.com/rn3.0.0alpha4.php What's New in 3. ...
- C# 平台问题
最近在C#项目中嵌入一个视频软件Ffplayer,出现报错现象,提示平台开发视频.dll文件的兼容性和加载格式不正确的问题.最终查看是由于项目平台选择的是Any CPU和X86的引起的.目标平台有什么 ...
- mysql在linux下的安装mysql-5.6.33
一.下载源码包 wget http://mirrors.sohu.com/mysql/MySQL-5.6/mysql-5.6.35-linux-glibc2.5-x86_64.tar.gz 二.解压源 ...
- webapi 支持 text/plain 请求
今天遇到一个需求,请求以HTTPS + XML 访问我的API ,普通的webapi 是不支持这个请求的,故做以下代码进行支持 新增一个类,类名为PlainTextTypeFormatter publ ...
- 深入浅出SharePoint——获取Choice Field的Mapping value
list field对应的caml定义如下 <Field Type="Choice" DisplayName="Inspection Result" Re ...
- [日常]蒟蒻的高一生活 Week 1~3
博主在三周前成功晋级为高中生OwO终于不再是假的HZOIer感受一波HZ的真正生活...(然而实际上级部不少监督一直没启动23333) (然而三周过去好多事情都忘了QAQ瞎写好了(逃)) Week 1 ...