如何禁用事件的浮升(div的子元素的点击事件会触发父元素的点击事件)
<div onclick="alert();">
<div onclick="alert();"></div>
</div>
上面给一个很简单的例子,当点击第二个div的时候,会同时触发此div与其父元素的点击事件,按照官方的说法,这是事件的浮升,那么要怎么阻止这种情况呢?
可以使用
event.cancelBubble=true;
代码如下:
<div onclick="alert();">
<div onclick="alert();event.cancelBubble=true;"></div>
</div>
这样就可以阻止事件的浮升造成的两个事件同时触发了
如何禁用事件的浮升(div的子元素的点击事件会触发父元素的点击事件)的更多相关文章
- 【转载】设置event.cancelBubble,使触发子元素的onclick不同时触发父元素的onclick
由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcEleme ...
- JS子元素oumouseover触发父元素onmouseout
原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...
- JS事件 什么是事件?JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...
- html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡
如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...
- 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件
前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...
- 透视 HTML子元素的margin-top样式会应用在父元素上的原由
情况说明 当对页面中元素设置margin-top样式时,如果该元素有父元素,则margin-top会应用与父元素,子元素的top与父元素的top重叠.举例说明 <style>body{ma ...
- CSS3 04. 伸缩布局、设置主轴,侧轴方向、主/侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items;控制子元素顺序、web字体、突变字体
CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...
- 子元素用margin-top 为什么反而作用在父元素上?对使用margin-top 的元素本身不起作用?
在这个说明中,“collapsing margins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容.padding区域.bor ...
- iframe子页面点击按钮,执行父页面的点击事件
iframe 子页面点击.parent 父页面 的id(auth-link-btn)的事件 <a href="javascript:void(0);" onclick=&q ...
随机推荐
- samba server install
要求: create vnc service for win7 access it via vnc viewer. 1TB disk for this Centos PC is used as Sam ...
- How to Install JAVA 8 (JDK/JRE 8u111) on Debian 8 & 7 via PPA
Oracle JAVA 8 Stable release has been released on Mar,18 2014 and available to download and install. ...
- 用MOS管防止电源反接的原理
电源反接,会给电路造成损坏,不过,电源反接是不可避免的.所以,我么就需要给电路中加入保护电路,达到即使接反电源,也不会损坏的目的. 一般可以使用在电源的正极串入一个二极管解决,不过,由于二极管有压降, ...
- Django如何搭建服务器
建立django站点: 新建Django项目,我这里是使用命令创建项目的. django-admin startproject HelloDjango 创建HelloDjango项目 然后进入到He ...
- [leetcode 27]Implement strStr()
1 题目: Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if ...
- Android热修复技术选型(不在市场发布新版本的情况下,直接更新app)
2015年以来,Android开发领域里对热修复技术的讨论和分享越来越多,同时也出现了一些不同的解决方案,如QQ空间补丁方案.阿里AndFix以及微信Tinker,它们在原理各有不同,适用场景各异,到 ...
- 微软Connect教程系列—VS2015集成新潮工具(四)
本课程来源与微软connect视频教程,Modern Web Tooling in Visual Studio 2015 本课程主要讲下当下流行的前端工具 bower和grunt 首先简单介绍下这俩货 ...
- Http规范
1. 关于 HTTP Basic Authentication http://blog.itpub.net/23071790/viewspace-709367/ 通过以下代码,提示用户登录 Respo ...
- 通过Measure & Arrange实现UWP瀑布流布局
简介 在以XAML为主的控件布局体系中,有用于完成布局的核心步骤,分别是measure和arrange.继承体系中由UIElement类提供Measure和Arrange方法,并由其子类Framewo ...
- 获取机器安装.NET版本的几种方式
当调查应用程序问题时,通常需要先确认目标机器所安装的 .NET Framework 的版本.可以通过如下方式来确认版本号: 通过控制面板安装程序查询 通过查询注册表获取版本信息 通过查看安装目录获取版 ...