html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡
如果子元素和父元素都有点击事件，会出现点击事件冒泡的情况。
1.如何避免冒泡：
html：
<html>
<head></head>
<body>
<div class="title login" style="color: #fff;font-size: 14px" id="personalInfo">
你好,
<span style="color:#fff;font-size: 14px " id="login_name_span">战无不胜</span>
<span style="color:#fff;font-size: 14px;margin-left: 4px " id="UserLogout">[注销]</span>
</div>
</body>
</html>
js
方法1：
UserLogout.onclick=function (e) {
e.stopPropagation();//阻止事件冒泡即可
//e.cancelBubble=true;//非标准的IE方式:; 这里的cancelBubble是 IE事件对象的属性，设为true就可以了
}
方法2：
UserLogout.onclick=function (e) {
//事件处理代码
//实际上是终结了这个（点击）事件，冒泡当然也就停止了。
return false;
}
2.关于事件冒泡
事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）
<html>
<head></head>
<body>
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.onclick = function(){alert(1);};
div1.onclick = function(){alert(2);};//父亲
//html代码
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>
当我们在div2里面点击的时候，会发现弹出了一次1，接着又弹出了2，这说明点击的时候，不仅div2的事件被触发了，它的父级的点击事件也触发了，这种现象就叫做冒泡。
冒泡还有一大优点，就是事件委托，而且经常用到，还能提高很大的性能，详情见：https://www.cnblogs.com/vickylinj/p/10940067.html
html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡的更多相关文章
- 如何禁用事件的浮升（div的子元素的点击事件会触发父元素的点击事件）
<div onclick="alert();"> <div onclick="alert();"></div> </d ...
- 【转载】设置event.cancelBubble，使触发子元素的onclick不同时触发父元素的onclick
由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcEleme ...
- JS子元素oumouseover触发父元素onmouseout
原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...
- 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件
前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...
- 解决：子元素设置margin-top，父元素也受影响的问题
<!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...
- 关于元素设置margin-top能够改变body位置的原因及解决（子元素设置margin-top改变父元素定位）
关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...
- HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
- 用jQuery.delegate()将事件绑定在父元素上面
1.先看看官方的示例: <html> <head> <script type="text/javascript" src="/jquery/ ...
- 子组件通过 $emit 触发父组件的自定义事件
子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData} ...
随机推荐
- Java 面向对象（三）
封装 什么是封装 面向对象三大特征之一 1. 把对象的状态和行为看成一个统一的整体,将字段和方法放到一个类中. 2. 信息隐藏:把不需要让外界知道的信息隐藏起来.尽可能隐藏对象功能实现细节,向外界暴露 ...
- What are the benefits to using anonymous functions instead of named functions for callbacks and parameters in JavaScript event code?
What are the benefits to using anonymous functions instead of named functions for callbacks and par ...
- JMeter学习-参数化
JMeter也有像LR中的参数化,本篇就来介绍下JMeter的参数化如何去实现. 参数化:录制脚本中有登录操作,需要输入用户名和密码,假如系统不允许相同的用户名和密码同时登录,或者想更好的模拟多个用户 ...
- BitmapFactory: 通过Bitmap的getWidth和getHeight方法获取到的尺寸与实际尺寸不符的问题
问题 今天无意中发现了一个问题,通过Bitmap的getWidth和getHeight方法获取到的图片尺寸与实际的尺寸(1920*1080)不一致,后来更进一步发现,把这张图片分别放在raw.draw ...
- NTC热敏电阻基础以及应用和选择（转）
源:NTC热敏电阻基础以及应用和选择 NTC被称为负温度系数热敏电阻,是由Mn-Co-Ni的氧化物充分混合后烧结而成的陶瓷材料制备而来,它在实现小型化的同时,还具有电阻值-温度特性波动小.对各种温度变 ...
- SQL-W3School-函数：SQL FORMAT() 函数
ylbtech-SQL-W3School-函数:SQL FORMAT() 函数 1.返回顶部 1. FORMAT() 函数 FORMAT 函数用于对字段的显示进行格式化. SQL FORMAT() 语 ...
- RabbitMQ 3.7.X集群：从入门到精通，这一篇就够了
RabbitMQ是流行的开源消息队列系统,本身已经具备了较强的并发处理速度及运行稳定性,然而在大规模的实际应用中,往往还需要使用集群配置来保证系统中消息通信部分的高可用性,并发处理性能及异常恢复能力. ...
- 浅析angular，react，vue.js jQuery-1
作者:尚春链接:https://www.zhihu.com/question/38989845/answer/79201080来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- react起步——从零开始编写react项目
# index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- 123457123456---com.threeObj3.BabyShizi02--- 宝宝识字02
com.threeObj3.BabyShizi02--- 宝宝识字02