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} ...
随机推荐
- Alpha项目冲刺！ Day4-产出
各个成员今日完成的任务 林恩:任务分工,博客撰写,了解安卓环境搭建 杨长元:安卓本地数据库基本建立 李震:学习 胡彤:完善服务端 寇永明:学习 王浩:学习 李杰:学习 各个成员遇到的问题 林恩:为自己 ...
- TP框架修改后台路径方法
直接映射 admin 后台修改路径为 myadmin888 文章来源:外星人来地球 欢迎关注,有问题一起学习欢迎留言.评论
- 超详细Qt5.9.5移植攻略
本文就来介绍下如何将Qt5.9.5移植到ARM开发板上. 以imx6开发板为例,使用Ubuntu14.04虚拟机作为移植环境. 准备工作 1.主机环境:Ubuntu14.04: 开发板:启扬IAC-I ...
- JDK目录详解
bin目录: 该目录用于存放一些可执行程序. 如javac.exe(java编译器).java.exe(java运行工具),jar.exe(打包工具)和* javadoc.exe(文档生成工具)等. ...
- 009-多线程-JUC集合-Queue-LinkedBlockingDeque
一.概述 LinkedBlockingDeque是双向链表实现的双向并发阻塞队列.该阻塞队列同时支持FIFO和FILO两种操作方式,即可以从队列的头和尾同时操作(插入/删除):并且,该阻塞队列是支持线 ...
- Visual studio 正在从以下位置加载符号：Microsoft符号服务器 尝试取消禁用后续符号加载
正在从以下位置加载符号:Microsoft符号服务器 尝试取消禁用后续符号加载 进入VS---工具---选项----调试----符号,看右边有个“Microsoft符号服务器”,将前面的勾去掉,( ...
- Ubuntu 14.04 apache安装配置
http://jingyan.baidu.com/article/6d704a130c8a0d28da51ca5f.html Ubuntu 14.04 apache安装配置 1.安装 ~# apt-g ...
- 基于pythonselect.select模块通信的实例讲解
基于python select.select模块通信的实例讲解 要理解select.select模块其实主要就是要理解它的参数, 以及其三个返回值. select()方法接收并监控3个通信列表, 第一 ...
- （五）UML之协作图
一.什么是协作图? 顾名思义协作图就是合作图,有合作就涉及到多个对象. 协作图(Collaboration Diagram /Communication Diagram,也叫合作图)是一种交互图(in ...
- EasyNetQ使用(十)【用EasyNetQ.Hosepipe重新提交错误信息】
EasyNetQ.Hosepipe是EasyNetQ队列管理工具.用来取回队列中的消息并重新发布这些消息.还可以用它来检测错误队列,并重试发布消息. 用法 EasyNetQ.Hosepipe.exe ...