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} ...
随机推荐
- 常用的xml头文件
原文:https://www.cnblogs.com/uniquezhangqi/p/9199329.html#commentform xmlns,xmlns:xsi,xsi:schemaLocati ...
- Linux -- Proactor(及其与Reactor的比较)
高并发服务器常由多线程+IO复用服务器(one event loop per thread) 两种I/O多路复用模式:Reactor和Proactor 一般地,I/O多路复用机制都依赖于一个事件多路分 ...
- Mysql5.7数据库介绍
(1).默认数据库介绍 information_schema 这个数据库保存了Mysql服务器所有数据库的信息.如数据库名.数据库的表.表栏的数据类型访问权限等. mysql 这个库是系统库,里面保存 ...
- 123457123456---com.threeObj3.BabyShizi02--- 宝宝识字02
com.threeObj3.BabyShizi02--- 宝宝识字02
- Oracle客户端下载地址
https://www.oracle.com/database/technologies/instant-client/downloads.html
- CentOS 7 vi详解
vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的任何版本,vi编辑器是完全相 ...
- php5.6安装及php-fpm优化配置
1,安装依赖包: yum install -y gcc gcc-c++ zlib zlib-devel pcre pcre-devel gd libjpeg libjpeg-devel libpn ...
- Linux程序Segmentation fault (core dumped)
1 问题原因 Segmentation fault (core dumped)多为内存不当操作造成.空指针.野指针的读写操作,数组越界访问,破坏常量等.对每个指针声明后进行初始化为NULL是避免这个问 ...
- SQL-TSQL
一.系统存储过程 常用 sp_helptext --查看可编程性(存储过程.函数.触发器.规则.默认值),表中(约束.触发器) EXEC sp_helptext f_M_Student 二.全局变量 ...
- Android 8.1 MTK6739修改文档
1. 信息-设置-通知-重要程度-中(不发出提示音),非锁屏界面下无提示通知框弹出 vendor/mediatek/proprietary/packages/apps/SystemUI/src/com ...