由于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. html 基本标签

    HTML 基本标签 Web 服务器工作原理 HTML 注释 HTML 基本标签 http://192.168.32.36:8080/scan/demo.html scan 表示你的应用资源目录 HTM ...

  2. iOS6和iOS7代码的适配(2)——status bar

    用Xcode5运行一下应用,第一个看到的就是status bar的变化.在iOS6中,status bar是系统在处理,应用中不需要考虑这部分,iOS7之后是应用在处理,每个ViewControlle ...

  3. Oracle_用户管理

    创建用户: CREATE USER user   --创建用户user IDENTIFIED {BY password | EXTERNALLY}  --设备用户密码,EXTERNALLY说用该用户由 ...

  4. Mysql 语句汇总（性能篇）

    查询mysql 哪些表正在被锁状态: show open TABLES where In_use > 0; show open table from XXX(数据库名);//查看数据库哪些表正在 ...

  5. 截取字符串一之substr

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Pie（求最小身高差，dp）

    Pie Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  7. SRM 584 div2

    早早地水完了三道题,pt1000用的是dfs,开始做的时候误认为复杂度最多就O(2^25),结果被一组O(2*3^16)的数据接近1e8给cha了.继续努力. pt250:求两个串的前缀组成的不同串数 ...

  8. 值得赞扬的尝试与进步——CSDN开源夏令营第一印象

    注:写这篇文章时我并未參加CSDN开源夏令营,也不确定是否会參加以及是否能參加上. 欣闻CSDN举办了"CSDN开源夏令营"活动.第一感觉是CSDN作为活动的组织者是很值得称赞的. ...

  9. 快照（Snapshot）

    一.定义: SNIA(存储网络行业协会)对快照(Snapshot)的定义是:关于指定数据集合的一个完全可用拷贝,该拷贝包括相应数据在某个时间点(拷贝开始的时间点)的映像.快照可以是其所表示的数据的一个 ...

  10. MyDatePicker拆分日期显示到不同TextBox

    如图所示效果:年—月—日 时—分—秒 <tr>                <td align="center" style="background- ...