原以为span不同于input，事件冒泡会被父级标签吞噬，写了个测试事件冒泡的Demo，发现并不是想得那样。另外：event.stopPropagation()以及event.stopImmediatePropagation()并不能阻止span冒泡到a标签中，而简单粗暴的return false却可以。

 <!DOCTYPE html>

 <html>

 <head>

     <title>Bubbling</title>

     <style type="text/css">

         * {

             font-size:30px;

         }

         div {

             border: 1px blue solid;

         }

         span {

             border: 1px blue solid;

         }

     </style>

     <script type="text/javascript">

         function setforeColor(sender) {

             sender.style.color = "red";

         }

         function setbgColor(sender) {

             sender.style.background = "green";

             return false;

         }

     </script>

 </head>

 <body>

     <div>

         <span onclick="setforeColor(this)">span tag</span> in div

     </div>

     <br>

     <div>

         <input type="button" value="Button" onclick="setforeColor(this)"/> in div

     </div>

     <br>

     <a href="https://www.baidu.com" style="text-decoration:none;display:block;">

         <span onclick="setforeColor(this);return false">span tag</span> in anchor

     </a>

     <br>

     <a href="https://www.baidu.com" style="text-decoration:none;display:block;">

         <span onclick="setbgColor(this)">span tag</span> in anchor

     </a>

 </body>

 </html>

更多参考：https://en.wikipedia.org/wiki/Event_bubbling、http://javascript.info/bubbling-and-capturing

Html事件冒泡的更多相关文章

  1. javascript中的事件冒泡和事件捕获

    1.事件冒泡 IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).以下面的HTML ...

  2. JQuery阻止事件冒泡

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点 ...

  3. JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)

    1.事件冒泡与事件捕获 2.事件与事件句柄   3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处:     1.每个函 ...

  4. JS阻止事件冒泡

    在使用JS事件的时候,外层元素事件有可能被里层元素的事件触发,例如点击里层元素外层也触发了点击,这种现象称为事件冒泡.(李昌辉) <div id="wai"> < ...

  5. 什么是JS事件冒泡？

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  6. 事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记

    1.事件流 浏览器开发团队遇到一个很有意思问题:页面的那一部分会拥有特定的事件? 对于理解这个问题您可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上 ...

  7. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  8. js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

    preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就 ...

  9. 解析Javascript事件冒泡机制

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

  10. 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

随机推荐

  1. 区块链下的io域名到底有多神秘？

    不知大家发现没有 一些科技创业公司首选域名后缀 是.IO WHY? 因为给人一种很酷的感觉啊~ 譬如,极客届享誉盛名的盘古越狱团队官网:http://pangu.io 国内优质社区,简书--创作你的创 ...

  2. C和C++中的名字空间和作用域

    C和C++中的名字空间和作用域 C语言中有名字空间这个概念吗? 提到名字空间(或者可能更普遍的叫法,命名空间),很可能先想到的是C++,甚至是C#.C中没有名字空间吧?一开始我也是这样认为的,直到我看 ...

  3. sql处理null值

    IFNULL(expr1,expr2) 如果expr1不是NULL,IFNULL()返回expr1,否则它返回expr2.IFNULL()返回一个数字或字符串值. select (case when ...

  4. [我所理解的REST] 2.REST用来干什么的？

    笔者每当遇到一个新事物的想去了解的时候,总是会问上自己第一个问题,这个新事物是干什么用的?在解释我所理解的REST这个过程中也不例外,这篇博客我们先关注一下REST是干什么用的,然后后续再解释REST ...

  5. 201521123083 《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 1.2 可选:使用常规方法总结其他上课内容. protec ...

  6. 团队作业4——第一次项目冲刺（Alpha版本）4.22

    团队作业4--第一次项目冲刺(Alpha版本) Day one: 会议照片 由于团队中的组员今天不在学校,所以我们的站立会议提前一天展开. 项目进展 由于今天是Alpha版本项目冲刺的第一天,所以没有 ...

  7. 201521123044 《Java程序设计》第2周作业-Java基本语法与类库

    1. 本章学习总结 ·1.浮点型的不精确,不能简单的像C语言一样用float或者double来定义.在java中有更精确的BigDecimal类. 举例:BigDecimal bd1= new Big ...

  8. 201521123071 《JAVA程序设计》第十周学习总结

    第十周-异常与多线程 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业:本次PTA作业题集异常.多线程 1. finally:题目4-2 1. ...

  9. C#参数详解

    参数 可选参数与命名参数 设计方法时,我们可以为部分参数设置默认值,在方法调用时就可以不提供该参数,使用其默认值.此外,调用方法时可以通过指定参数名的方式来传递参数.话不多说,请看以下示例: stat ...

  10. headfirst设计模式（3）—装饰者模式

    序 好久没写设计模式了,自从写了两篇之后,就放弃治疗了,主要还是工作太忙了啊(借口,都是借口),过完年以后一直填坑,填了好几个月,总算是稳定下来了,可以打打酱油了. 为什么又重新开始写设计模式呢?学习 ...