JS中的事件冒泡——总结
一. 有话要说
事件冒泡这个话题已经被园子里的朋友说透了,已经没什么要讲的了,但是由于呢我这边有个小问题刚好跟这个事件冒泡有关,就突然性想写个总结;一方面是给自己增加印象,另一方面给园子的新手们,提供一些方便 ^_^
二. 事件冒泡
什么是事件冒泡? 定义百度一搜一大把,我就不细讲了;我总结就是:dom行为机制的触发,并且存在上下级元素(父子级),如果不做些特殊操作,就会产生重复触发这个行为机制(事件)
具体表现:
<div style="width:100%;height:700px;">
<div style="width: 200px; height: 50px; border: 1px solid #000;">
</div>
</div>
jq:
$(document).ready(function () {
$("body").bind("click", function () {
alert("body元素被点击了");
});
$("div").bind("click", function () {
alert("div元素被点击了");
});
});
这样运行就会发现,当点击div范围的时候 会先触发div的点击事件,然后再是body的点击事件;为什么?
这是因为当我们为body和div分别绑定点击事件的时候,由于body是div的父元素,当div被点击时,dom会回溯找到它的(div)的父元素,并查看有没有为父元素绑定事件,有则触发,没有就继续查找div的父元素 这样不断的向上回溯查找 这就形成了事件冒泡。
这显然不是我们想到的结果,那怎么样才能做到当点击div的时候就只触发div的点击事件,而不要触发body的点击事件?
解决方案百度,园子里太多了,所以我这里就大概总结了那么几种方法
三. 解决方法
方法1. 直接在子元素(这里的div)js的最后增加一个 return false;
方法2. 当你把方法1的子元素的绑定方法抽出来放在元素上的onclick属性上的时候,方法1就不管用了,那么就要做以下处理:
function Test2(event) {
alert("div元素被点击了");
event = window.event || event;
if (event.stopPropagation) //停止向上传播事件 关于stopPropagation的解释,请点击这stopPropagation
event.stopPropagation();
else
event.cancelBubble = true; //如果浏览器不支持stopPropagation 则设置cancelBubble来取消上传传播事件冒泡
};
方法3. 除了以上方法,还有一个方法值得注意,这个方法一开始我也不知道,是查了资料才知道的
$("body").bind("click", function (e) {
e = e || window.event;
var src = e.target || e.srcElement;
if (src.tagName == "DIV") { //这里可以用属性,只要是符合dom标签属性规则的 比如 id等
//说明是点击了div
alert("div元素被点击了");
}
else {
//是在div范围外点击的
alert("body元素被点击了");
}
});
希望这些对遇到事件冒泡的同学有些帮助 就写到这里了!
JS中的事件冒泡——总结的更多相关文章
- js中阻止事件冒泡和浏览器默认行为
在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...
- JS中的事件冒泡(Bubble)和事件捕获(capture)以及如何阻止事件的冒泡
对“捕获”和“冒泡”这两个概念,通常我们对冒泡了解和使用的会更多一些,因为在我们使用的所有浏览器中,都支持事件冒泡 ,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefo ...
- JS中的事件冒泡和事件捕获
事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target). 事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签. 用图示表示如下: 1.冒泡事件: ...
- js中的事件冒泡
事件冒泡和阻止事件冒泡: 事件冒泡的原理:从实际操作的元素(事件)向上级父元素一级一级执行下去,直到达到document/window,冒泡过程结束.例如:假设我有一个 div 盒子,里面嵌套了1个子 ...
- css 中的事件冒泡
css伪类中的表现类似于事件冒泡的,举个例子,当你滑过一个元素时,他会认为你也滑过了该元素的父元素,即使该元素看起来并没有包含在父元素里面,此处以:hover例子: 效果图: 滑过前: 滑过后: CS ...
- js中的事件委托(事件代理)详解
本文转载:https://www.cnblogs.com/liugang-vip/p/5616484.html#!comments js中的事件冒泡.事件委托是js 中一些需要注意的小知识点,这里结合 ...
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
- 看懂此文,不再困惑于 JS 中的事件设计
看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...
- DOM 以及JS中的事件
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
随机推荐
- The service definition selected is invalid
吐槽下 最近在学Java 听闻Java生态很好 社区很多 但实际操作起来确实另一番风景 不多说了 说正事 添加WebService服务Client时有密码认证得服务 Eclipse抛出 The ser ...
- CC2530学习路线-基础实验-GPIO 按键控制LED灯亮灭(2)
目录 1.前期预备知识 1.1 新大陆Zigbee模块按键电路图 1.2 CC2530相关寄存器 1.3 CC2530中断走向图 1.4 使用C语言为51单片机编写中断程序 1.5 *函数指针 2. ...
- ASP.net MVC4/MVC5 错误处理及设置
很无聊的记录下.首先IIS 7以上的版本测试才成功 首先 //全局ErrorHandler public static void RegisterGlobalFilters(GlobalFilterC ...
- JavaScript基础事件(6)
day53 参考:https://www.cnblogs.com/liwenzhou/p/8011504.html#autoid-2-3-8 事件 HTML 4.0 的新特性之一是有能力使 HTML ...
- QQ个人信息保护 | 攻的对面叫防
近来我们愈来愈重视个人信息保护,当接到骚扰电话时,你心里或许在想(我手机号怎么又被别人知道的?别人是怎么知道我手机号的?),现在的时代,手机已或不可缺,QQ几乎每个人都在用.而有些人总想保护个人QQ资 ...
- 打开SVN server图形化管理界面
来源:http://blog.csdn.net/u013495063/article/details/76796079 1.在ViaualSVN Service的安装目录:C:\Program Fil ...
- Java原子操作类汇总
当程序更新一个变量时,如果是多线程同时更新这个变量,可能得到的结果与期望值不同.比如:有一个变量i,A线程执行i+1,B线程也执行i+1,经过两个线程的操作后,变量i的值可能不是期望的3,而是2.这是 ...
- python安装mysqlclient模块时报mysql_config not found解决方法
在配置Flask框架,安装mysqlclient时报一下错误 翻译了一下大概是 mysql_config 文件没找到, 解决方法是安装缺失的文件. sudo apt install libmysql ...
- ApplicationLoader登录失败. Please sign in with an app-specific password.
打包时登录ApplicationLoader时 报错:Please sign in with an app-specific password. You can create one at apple ...
- 远程连接MySQL提示 Host is not allowed to connect to this MySQL server
进入连接的主机修改系统数据库MySQL 下面的user表,把User= root(这里可能是其他你所需要连接的用户名)的这行数据的Host从localhost改为% 如下图: 修改完之后一定要重启My ...