由于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. Storm csdn

    blog.csdn.net/lonelytrooperblog.csdn.net/leytton http://my.oschina.net/apdplat/blog/308396

  2. firemonkey打开子窗体

    procedure TForm1.Button1Click(Sender: TObject);varChildForm: TForm2;beginChildForm := TForm2.Create( ...

  3. Dot模板的使用小结2

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

  4. Python的中文编码转换问题

    与server进行数据交换时,尤其是数据中含有中文时,要注意中文的编码问题. 要选择server接受的编码方式,否则会造成显示乱码. 经验: 实验室server的数据库,中文用UTF-8编码,但我提交 ...

  5. Android开发学习之TypedArray类

    在学习Android的开发中,学习Gallery视图显示图片的过程中,在设置图片适配器的时候,用到了此TypedArray类型,这次根据android SDK,一块把此类型弄清楚! android.c ...

  6. Java实现串口通信的小样例

    用Java实现串口通信(windows系统下),须要用到sun提供的串口包 javacomm20-win32.zip.当中要用到三个文件,配置例如以下: 1.comm.jar放置到 JAVA_HOME ...

  7. HDU Exponentiation 1063 Java大数题解

    Exponentiation Time Limit: 1000/500 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  8. new、delete与malloc、free的详解

    内容清单: 1．  C语言中的函数malloc和free 2．  C++中的运算符new和delete 3．  new/delete与malloc/free之间的联系和区别 4．  C/C++程序的内 ...

  9. .net 文件下载

    /** 输入参数* _Request: Page.Request 对象* _Response: Page.Response 对象* _fileName: 下载文件名* _fullPath: 带文件名下 ...

  10. Oracle 客户端配置笔记

    1.右击桌面的我的电脑 -> 高级 -> 环境变量,新建 1) 变量名:ORACLE_HOME 变量值:D:\app\instantclient_11_2 2) 变量名:TNS_ADMIN ...