<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的子元素的点击事件会触发父元素的点击事件)的更多相关文章

  1. 【转载】设置event.cancelBubble,使触发子元素的onclick不同时触发父元素的onclick

    由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcEleme ...

  2. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

  3. JS事件 什么是事件?JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

    什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...

  4. html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡

    如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...

  5. 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件

    前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...

  6. 透视 HTML子元素的margin-top样式会应用在父元素上的原由

    情况说明 当对页面中元素设置margin-top样式时,如果该元素有父元素,则margin-top会应用与父元素,子元素的top与父元素的top重叠.举例说明 <style>body{ma ...

  7. CSS3 04. 伸缩布局、设置主轴,侧轴方向、主/侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items;控制子元素顺序、web字体、突变字体

    CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...

  8. 子元素用margin-top 为什么反而作用在父元素上?对使用margin-top 的元素本身不起作用?

    在这个说明中,“collapsing margins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容.padding区域.bor ...

  9. iframe子页面点击按钮,执行父页面的点击事件

    iframe 子页面点击.parent 父页面  的id(auth-link-btn)的事件 <a href="javascript:void(0);" onclick=&q ...

随机推荐

  1. Win7环境下搭建Go开发环境,基于VSCode编辑器

    一.在搭建的时候参考以下文章 http://www.cnblogs.com/zsy/archive/2016/02/28/5223957.html http://blog.csdn.net/hil20 ...

  2. [你必须知道的NOSQL系列]专题二:Redis快速入门

    一.前言 在前一篇博文介绍了MongoDB基本操作,本来打算这篇博文继续介绍MongoDB的相关内容的,例如索引,主从备份等内容的,但是发现这些内容都可以通过官方文档都可以看到,并且都非常详细,所以这 ...

  3. JavaScript很牛

    几年前,我从来没有想过现在的JavaScript竟然会变得几乎无处不在.下面是几个要关注JavaScript的原因. 首先,我认为JavaScript能够得到普及的主要原因之一是,JavaScript ...

  4. Programming Entity Framework CodeFirst -- 约定和属性配置

     以下是EF中Data Annotation和 Fluenlt API的不同属性约定的对照.   Length Data Annotation MinLength(nn) MaxLength(nn) ...

  5. Homebrew简介及安装

    Homebrew官网 http://brew.sh/index_zh-cn.html Homebrew是神马 linux系统有个让人蛋疼的通病,软件包依赖,好在当前主流的两大发行版本都自带了解决方案, ...

  6. git rm–r folder fatal:pathspec "" did not match any files

    问题描述: 某年某月某日,在查看git库的时候,发现文件的分布和文件夹的名字是极其不合理的,所以移动和重命名了某些文件. 在删除(git rm –r folder)一个空文件夹的时候,出现错误:fat ...

  7. Android 数据传递(二)Activity与fragment之间的通信

    在网上找到了一篇总结的非常好的文章,我这里就贴出他的博文地址.自己就不再写这个方面的总结了. Activity与Fragment通信(99%)完美解决方案

  8. Visual Studio 2010 实用功能:使用web.config发布文件替换功能

    当建立ASP.NET Web应用程序项目后,默认除了生成web.config外,还生成了web.debug.config与Web.Release.config.顾名思义,根据它们的命名我可以推测到他们 ...

  9. [数据库事务与锁]详解八:底理解数据库事务乐观锁的一种实现方式——CAS

    注明: 本文转载自http://www.hollischuang.com/archives/1537 在深入理解乐观锁与悲观锁一文中我们介绍过锁.本文在这篇文章的基础上,深入分析一下乐观锁的实现机制, ...

  10. Atitit usrQBK1600 技术文档的规范标准化解决方案

    Atitit usrQBK1600 技术文档的规范标准化解决方案 1.1. Keyword关键词..展关键词,横向拓展比较,纵向抽象细化拓展知识点1 1.2. 标题必须有高大上词汇,参考文章排行榜,1 ...