1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4. <title>JS中的事件冒泡</title>
  5. <mce:script type="text/javascript"><!--
  6. function ClickTr()
  7. {
  8. alert("TR");
  9. }
  10. function ClickTd()
  11. {
  12. alert("TD");
  13. //如果不加下面的代码点击先会弹出TD然后弹出TR，原因是HTML是对象结构当点击AAA的时候（执行）,会冒泡到TR-->table-->body->document->window,当用event.cancelBubble=true的时候就说明阻止该冒泡行为
  14. event.cancelBubble=true;
  15. }
  16. // --></mce:script>
  17. </head>
  18. <body>
  19. <div style="background-color:Azure;" mce_style="background-color:Azure;">目的当点击BBB的时候弹出TR,当点击AAA的时候弹出TD</div>
  20. <table>
  21. <tr onclick="ClickTr();">
  22. <td onclick="ClickTd();">AAA</td>
  23. <td>BBB</td>
  24. </tr>
  25. </table>
  26. </body>
  27. </html>

js中冒泡事件的更多相关文章

  1. js中冒泡事件和捕获事件

    js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...

  2. 怎么理解js中的事件委托

    怎么理解js中的事件委托 时间 2015-01-15 00:59:59  SegmentFault 原文  http://segmentfault.com/blog/sunchengli/119000 ...

  3. 看懂此文，不再困惑于 JS 中的事件设计

    看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...

  4. DOM 以及JS中的事件

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  5. 从零开始的JS生活（二）——BOM、DOM与JS中的事件

    上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...

  6. JS中的事件以及DOM 操作

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  7. JS中的事件&对象

    一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...

  8. JS学习五(js中的事件)

    [JS中的事件分类] 1.鼠标事件 click/bdlclick/onmouseover/onmouseout 2. HTML事件 onload/onscroll/onsubmit/onchange/ ...

  9. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

随机推荐

  1. Struts2 stracture

  2. python学习第一天内容整理

    .cnblogs_code { width: 500px } 一.python 的历史 (摘自百度百科,了解就ok) Python[1]  (英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn ...

  3. 分布式版本控制系统Git-----3.图形化Tortoisegit创建本地库并且提交到远程服务器上

    [前提你已经有了自己的远程仓库帐号密码和HTTP地址] PS:图形化会方便,但是个人认为还是敲命令比较好,会锻炼人的思维和逻辑. 1.首先在任意一个地方创建test目录.若要把test目录放在Git的 ...

  4. VPS服务器利用WINSCP软件进行SFTP管理服务器文件

    虽然我使用VPS时间也不是很久,但是我善于进行统计和分析,从我在的一些VPS交流QQ群中,可以看到基本上使用搬瓦工VPS的站长群中新手较多,甚至很多人都搞不明白VPS与V-P-N的区别都直接选择VPS ...

  5. 遮盖层实现（jQuery+css+html）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. 【Sort】QuickSort

    快速排序,平均运行时间O(N log N),最坏运行时间O(N^2). 我觉得先看Python版的快排算法(http://www.cnblogs.com/fcyworld/p/6160558.html ...

  7. Markdown转pdf

    最近由于项目需要,要用到把markdown转换成pdf文件下载下来,最开始的时候想到的是先把markdown转成html,用到的是Parsedown:然后再将html转成pdf,用到了html2pdf ...

  8. 8.Hibernate的多对多关联映射

    1.创建如下数据库脚本 --1.1 项目表 create table PROJECT ( proid ) not null, proname ) ) ; --1.2 项目表主键 alter table ...

  9. digitalocean网站打不开，大陆无法正常访问怎么办？

    在中国大陆,由于某些恶心的原因,digitalocean官方网站经常出现无法打开,或者打开后网页异常的情况,如果你是一个新注册用户,你甚至会被吓到,一个全球知名的vps主机商网站可能是这样的: 我的天 ...

  10. C++著名程序库的比较和学习经验(STL.Boost.GUI.XML.网络等等)

    1.C++各大有名库的介绍--C++标准库 2.C++各大有名库的介绍--准标准库Boost 3.C++各大有名库的介绍--GUI 4.C++各大有名库的介绍--网络通信 5.C++各大有名库的介绍- ...