事件冒泡:

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

这个事件从原始祖先开始,一直冒泡到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. slot 插槽的作用域用法(摘自vue.js 官网)

    有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽.例如一个简单的 <todo-list> 组件的模板可能包含了如下代码: <ul> <li v-for=& ...

  2. 在VS2017上对C++项目进行单元测试

    操作系统:win10 VS2017安装:http://www.cnblogs.com/Metak/p/7471671.html 参考博客: http://blog.csdn.net/lovehaiho ...

  3. 业务-----修改Service常用逻辑

    注意:修改时唯一属性不能重复 //num==null 时,没有修改Num,不用考虑重复问题.//num!=null 时,修改了num.考虑重复问题 if(!StringUtils.isEmpty(re ...

  4. JavaScript表单提交不能清空type为hidden的input快速解决方案

    http://stackoverflow.com/questions/2559616/javascript-true-form-reset-for-hidden-fields 把input type= ...

  5. No input file specified ci

    1. php.ini(/etc/php5/cgi/php.ini)的配置中这两项cgi.fix_pathinfo=1  (这个是自己添加的)

  6. node 和npm 版本更新

    node 版本更新 由于公司要用NG-ZORRO,于是我就跑到官网先看看demo,怎么构建项目,执行的过程中发现了问题 问题描述 执行官网构建项目命令 安装脚手架工具# $ npm install - ...

  7. MyBatis:一对多关联查询

    MyBatis从入门到放弃四:一对多关联查询 前言 上篇学习了一对一关联查询,这篇我们学习一对多关联查询.一对多关联查询关键点则依然是配置resultMap,在resultMap中配置collecti ...

  8. BZOJ2006[NOI2010]超级钢琴——堆+主席树

    题目描述 小Z是一个小有名气的钢琴家,最近C博士送给了小Z一架超级钢琴,小Z希望能够用这架钢琴创作出世界上最美妙的 音乐. 这架超级钢琴可以弹奏出n个音符,编号为1至n.第i个音符的美妙度为Ai,其中 ...

  9. NOIP 2018 游记(退役了!)

    一片空白 在霉的不能再霉的18年11月,Noip2018上,倒霉的我也是贼有意思,感冒加身,D2发烧,数组开小…我还能说什么MMP,身体和考试能力真的很重要. ……(省略无数字的心理活动,有空补上~) ...

  10. Python3网络爬虫(1):利用urllib进行简单的网页抓取

    1.开发环境 pycharm2017.3.3 python3.5 2.网络爬虫的定义 网络爬虫,也叫网络蜘蛛(web spider),如果把互联网比喻成一个蜘蛛网,spider就是一只在网上爬来爬去的 ...