由于HTML中的对象都是层次结构，比如一个Table包含了多个TR，一个TR包含了多个TD

Bubble就是一个事件可以从子节点向父节点传递，比如鼠标点击了一个TD，当前的event.srcElement就是这个TD，但是这种冒 泡机制使你可以从TR或者Table处截获这个点击事件，但是如果你event.cancelBubble，则就不能上传事件。

例子：

<html>

<body>

<table border="1" width="26%" id="tableA" onclick="alert('tableA')">

<tr onclick="tableA_rowA_click()">

   <td width="106">一般</td>

</tr>

<tr onclick="tableA_rowB_click()">

   <td width="106">阻止消息上传</td>

</tr>

</table>

<p> 　</p>

</body>

</html>

<!--   -->

<script language="javascript">

<!--

function tableA_rowA_click(){

alert('tableA_rowA');

}

function tableA_rowB_click(){

alert('tableA_rowB');

event.cancelBubble=true;

}

//-->

</script>

event.cancelBubble阻止事件冒泡   event.cancelBubble=true; 

取消事件冒泡，在 IE 的事件机制中，触发事件会从子元素向父元素逐级上传，就是说，如果子元素触发了单击事件，那么也会触发父元素的单击事 件；event.cancelBubble=true;可以停止事件继续上传补充一点，Ie的事件传递是从下到上的：

事件来源对象->上级对象->上上级对象->.....->body->document->window

NS的事件传递是从上到下：

window->document->body->....->事件来源对象实例源码如下：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>event.cancelBubble</title>

<style>

<!--

* {font:menu}

-->

</style>

</head>

<body>

<span onclick=alert("你好")>点我 <span>再点我</span></span><br><br>

<span onclick=alert("你好")>点我 <span onclick=event.cancelBubble=true;>再点我</span></span>

</body>

</html>

实例2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="developer" content="Realazy" />

<title>Bubble in JavaScript DOM--JavaScript 的事件冒泡 demo　</title>

<style type="text/css" media="screen">

div * {display:block; margin:4px; padding:4px; border:1px solid white;}

textarea {width:20em; height:2em;}

</style>

<script type="text/javascript">

      //<![CDATA[

      function init(){

    var log = document.getElementsByTagName('textarea')[0];

    var all = document.getElementsByTagName('div')[0].getElementsByTagName('*');

    for (var i = 0, n = all.length; i < n; ++i){

     all[i].onmouseover = function(e){

      this.style.border = '1px solid red';

      log.value = '鼠标现在进入的是： ' + this.nodeName;

     };

     all[i].onmouseout = function(e){

      this.style.border = '1px solid white';

     };

    }

    var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*');

    for (var i = 0, n = all2.length; i < n; ++i){

       all2[i].onmouseover = function(e){

      this.style.border = '1px solid red';

      if (e) //停止事件冒泡

       e.stopPropagation();

      else

       window.event.cancelBubble = true;

      log.value = '鼠标现在进入的是： ' + this.nodeName;

     };

     all2[i].onmouseout = function(e){

      this.style.border = '1px solid white';};

     }

    }

window.onload = init;

      //]]>

</script>

</head>

<body>

<h1>Bubble in JavaScript DOM</h1>

<p>DOM树的结构是：</p>

<pre><code>

UL

    - LI

       - A

     - SPAN

</code></pre>

<div>

<ul>

    <li><a href="#"><span>Bubbllllllllllllllle</span></a></li>

    <li><a href="#"><span>Bubbllllllllllllllle</span></a></li>

</ul>

</div>

<textarea></textarea>

<p> 鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停 （<code>mouseover</code>）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的 边。</p>

<div>

<ul>

    <li><a href="#"><span>Bubbllllllllllllllle</span></a></li>

    <li><a href="#"><span>Bubbllllllllllllllle</span></a></li>

</ul>

</div>

<p>如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。</p>

</body>

</html>

【转载】设置event.cancelBubble，使触发子元素的onclick不同时触发父元素的onclick的更多相关文章

  1. 子元素增加margin-top会增加给父元素的问题

    假设我们有如下代码 <div id="father" style="height:400px;width:400px;background:#e4393c;&quo ...

  2. 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...

  3. js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素

    js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素 一.总结 一句话总结:closest()方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上.of ...

  4. chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素

    1 <div class="container"> <div class="item"> <div class="ite ...

  5. css子元素的margin-top为何会影响父元素

    详细内容请点击 这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出 ...

  6. 子元素设定margin值会影响父元素

    有些情况下,我们设定父元素下的子元素margin值时,父元素会被影响. 这是个常见问题,而且只在标准浏览器下 (FirfFox.Chrome.Opera.Sarfi)产生问题,IE下反而表现良好. 例 ...

  7. 子元素应该margin-top为何会影响父元素【转】

    这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然 ...

  8. css中：如何让一个图片（不知道宽高，宽高可能比父元素div大），在父元素div内部水平垂直居中，并且不溢出父元素div，且图片不拉伸变形（可等比例缩小）？

    欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...

  9. jquery获取一个元素符合条件的第一个父元素

    closest jQuery 1.3新增.从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素.. closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身.如果不匹配则向上查找父元素 ...

随机推荐

  1. PHP之MVC微型框架简单搭建

    好长时间没有写博客了,这段时间过得紧张的不行,以致于都没有抽出时间来好好的总结一下自己这段时间的生活和学习. 其实今天不想写什么技术博客,就想简单总结一下这段时间的生活.10月8号从家里回来以后决定自 ...

  2. 浅析指针（pointer）与引用（reference）

    在c++函数中,形式参数用引用和用指针都可以起到在被调用函数中改变调用函数的变量的作用.什么时候用引用作参数?什么时候用指针作参数呢 void function (int *ptr); void fu ...

  3. openNebula 运维系列虚拟机virtual machines operations

    1,virtual machine manage,VMInstance state; http://docs.opennebula.org/4.4/user/virtual_resource_mana ...

  4. Android NDK 编译FFmpeg(不需要复杂的环境变量设置)

    环境: CentOS6.2——64位 借鉴:https://vec.io/posts/how-to-build-ffmpeg-with-android-ndk 在根目录下创建work文件夹:cd  / ...

  5. c# 搭建服务端 常用的Helper（5）

    常用的Helper 1.byteHelper :对象与byte[]之间的转换 2.ConvertJson:操作json对象 3.EncodingHelper:对象编码 4.ModelConvertHe ...

  6. python访问cloudstack的api接口

    1.CloudStack API 如同 AWS API 一样,CloudStack API 也是基于 Web Service,可以使用任何一种支持 HTTP 调用的语言(例如 Java,python, ...

  7. 【MongoDB数据库】MongoDB 命令入门初探

    MongoDB是一款NoSql数据库,使用了"面向集合"(Collection-Oriented)原理,意思是数据被分组存储在数据集中,被称为一个集合(Collection).每一 ...

  8. [有用命令]Linux 用户，用户组

    更改文件拥有者 -R 是递归的意思 chown [ -R ] root.work test 将test 文件 改为 拥有者 root , 用户组 work. chown [ -R ] work tes ...

  9. HTML系列（七）：多媒体

    一.video标签 H5新增了video实现在线播放视频的功能: 代码示例: <video controls="controls"> <source src=&q ...

  10. 2014.8.20break,continue,字符串，数字和日期

    (一)break与continue break——彻底终断循环 continue——中断本次循环,继续下次循环 break举例: //求100以内所有质数 ; i <= ; i++) { ;// ...