事件冒泡:

当一个元素上的事件被触发时,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先中被触发,这一过程被称为事件冒泡。

这个事件从原始祖先开始,一直冒泡到DOM树的最上层。(bug)

(本来应该一人做事一人当,结果我做错了事,你却去告诉了我妈)

简单来说,冒泡就是:子元素事件被触动,父盒子的同样事件也会被触动。

取消冒泡就是取消这种机制。

阻止冒泡:

火狐、谷歌、IE11:event.stopPropagation();

IE10以下:event.cancelBubble = true;

兼容代码:

a.onclick = function (event) {

//阻止冒泡
event = event || window.event;
if(event && event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}

}

javascript 事件冒泡与取消冒泡的更多相关文章

  1. JavaScript事件:事件处理模型(冒泡、捕获)、取消冒泡、阻止默认事件

    (一)事件处理模型---事件冒泡.捕获 (1)事件冒泡 24 <body> 25 <div class="warpper"> 26 <div clas ...

  2. 第一百二十节,JavaScript事件对象

    JavaScript事件对象 学习要点: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功 ...

  3. javascript的自定义对象/取消事件/事件兼容性/取消冒泡

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...

  5. JavaScript事件——冒泡、捕获

    本节要点:1.干预系统的事件处理机制 (一)DOM事件流 (二)停止事件冒泡 (三)阻止事件的默认行为 1.干预系统的事件处理机制 (一)DOM事件流 DOM模型是一个树形结构,在DOM模型中,HTM ...

  6. Javascript事件冒泡机制

    1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...

  7. javascript事件捕获与冒泡

    对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefox,chrom ...

  8. javascript事件冒泡

    1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...

  9. JavaScript:事件对象Event和冒泡

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章中已经讲过事件的概念.这里讲一下注册 ...

随机推荐

  1. jmeter(psot) 表单提交 注意项

    Form表单提交:直接使用表单方式提交即可,此方式采取页面直接跳转的形式.用jmeter请求的时候,日志打印传的参数是空的.考虑到form提交和http的提交请求头可能是不一样的,所以优化了请求头: ...

  2. 临时关闭Mysql ONLY_FULL_GROUP_BY

    /** * @author lcc807@ikoo8.com * * 临时关闭Mysql ONLY_FULL_GROUP_BY */ function closeSqlFullMode(){ DB:: ...

  3. ios微信浏览器中video视频播放问题

    微信ios只支持几种特定的视频格式,一般使用mp4格式的视频(腾讯官方就是用的这种视频格式)

  4. python模块_多重继承的MRO

    MRO(Method Resolution Order):方法解析顺序.Python语言包含了很多优秀的特性,其中多重继承就是其中之一,但是多重继承会引发很多问题,比如二义性,Python中一切皆引用 ...

  5. Python调用C++类

    http://blog.csdn.net/liyuan_669/article/details/25361655 C++导出类到Python http://blog.csdn.net/arnozhan ...

  6. appium使用错误集合

    原因:没有加载该文件 解决方案: cmd 使用:adb shell uiautomator dump 在cmd生成   然后就可以获取元素了 使用send_keys()输入报错  selenium.c ...

  7. Layui_1.0.9_分页实例_Java

    一.实体 package com.ebd.application.modules.taskManage.pojo; import com.ebd.application.common.Base.Bas ...

  8. [UVALive 3661] Animal Run

    图片加载可能有点慢,请跳过题面先看题解,谢谢 附:中文题面,[BZOJ1001]狼抓兔子 就要考联赛了,博客里题目的\(style\)都变了,几乎都是些套路啥的,这道题也比较套路 第一眼看这道题的感觉 ...

  9. NOIP2012题解

    NOIP2012题解 Day1 Vigenère 密码 vigenere 直接模拟就好了,对于那张表找找规律就很短了. #include<iostream> #include<cst ...

  10. [luogu3178][bzoj4034][HAOI2015]树上操作

    题目描述 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树中所有点的点权都增 ...