<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. Perl的多进程框架(watcher-worker)

    关于perl的多进程,大家可能马上会想到Parallel::ForkManager这个模块.但是今天我们试着自己动手写一个类似的框架:) 该多进程开发模型从开源服务器框架Lighttpd发展而来,核心 ...

  2. <2048>游戏问卷调查心得与体会

    这是我的首次做问卷调查,刚开始感到不知所措,不知道该怎么去完成它,但是其中也充满了所谓的新鲜感,以前总是填别人做的问卷调查,但是现在是我们小组自己讨论得到的一张属于自己的问卷,可以说感受很深,一张小小 ...

  3. wpf下datagrid使用过程中需要注意的几点(一)

    MainWindow.xaml中的代码如下: <DataGrid CanUserAddRows="False" ItemsSource="{Binding}&quo ...

  4. centos 6.5 中设置mysql 5.1.73 主从同步配置过程

    本文章给大家介绍centos 6.5设置mysql主从同步过程记录,希望文章对各位会带来帮助.  涉及到的centos系统均为虚拟机,VM下安装的版本. 在centos 6.5上设置了mysql主从功 ...

  5. Sensor(GYROSCOPE)

    package com.example.sensor01; import java.util.List; import android.hardware.Sensor; import android. ...

  6. Linux 网络编程(IO模型)

    针对linux 操作系统的5类IO模型,阻塞式.非阻塞式.多路复用.信号驱动和异步IO进行整理,参考<linux网络编程>及相关网络资料. 阻塞模式 在socket编程(如下图)中调用如下 ...

  7. css选择器优先级全解析

    这样一个问题: <!doctype html> <htmllang="en"> <head> <metacharset="UTF ...

  8. java实现输入一行字符,分别统计出其中英文字母、空格、数字和其它字符的个数。

    package JingDian; import java.util.Scanner; public class charKind { public static void main(String[] ...

  9. Android多线程分析之三:Handler,Looper的实现

    Android多线程分析之三:Handler,Looper的实现 罗朝辉 (http://www.cnblogs.com/kesalin/) CC 许可,转载请注明出处 在前文<Android多 ...

  10. [ACM_动态规划] 嵌套矩形

    问题描述:有n个矩阵,每个矩阵可以用两个整数a,b来表示 ,表示他的长和宽,矩阵X (a,b) 可以 嵌套 到Y (c,d) 里面当且仅当 a < c &&  b < d  ...