【转载】设置event.cancelBubble，使触发子元素的onclick不同时触发父元素的onclick

由于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的更多相关文章

子元素增加margin-top会增加给父元素的问题
假设我们有如下代码 <div id="father" style="height:400px;width:400px;background:#e4393c;&quo ...
当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系
问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...
js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素
js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素一.总结一句话总结:closest()方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上.of ...
chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素
1 <div class="container"> <div class="item"> <div class="ite ...
css子元素的margin-top为何会影响父元素
详细内容请点击这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出 ...
子元素设定margin值会影响父元素
有些情况下,我们设定父元素下的子元素margin值时,父元素会被影响. 这是个常见问题,而且只在标准浏览器下 (FirfFox.Chrome.Opera.Sarfi)产生问题,IE下反而表现良好. 例 ...
子元素应该margin-top为何会影响父元素【转】
这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然 ...
css中：如何让一个图片（不知道宽高，宽高可能比父元素div大），在父元素div内部水平垂直居中，并且不溢出父元素div，且图片不拉伸变形（可等比例缩小）？
欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...
jquery获取一个元素符合条件的第一个父元素
closest jQuery 1.3新增.从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素.. closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身.如果不匹配则向上查找父元素 ...

随机推荐

JS---DOM概述
DOM DOM:文档对象模型document object model DOM三层模型: DOM1:将HTML文档封装成对象 DOM2:将XML文档封装成对象 DOM3:将XML文档封装成对象 DOM ...
COB (Chip On Board) 製程介紹/簡介/注意事項 II
銀膠 (Silver glue) 如果晶圓有接地或是散熱需求時,一般都會採用[銀膠],如果沒有的話則會採用[厭氧膠].[厭氧膠]顧名思義就是阻隔它與空氣接觸後就會自然固化,不需要高溫烘烤.使用銀膠則需 ...
iptsbles及磁盘扩容
如果你的IPTABLES基础知识还不了解,建议先去看看. 们来配置一个filter表的防火墙 1.查看本机关于IPTABLES的设置情况 [root@tp ~]# iptables -L -n Cha ...
extend vg(pv,lv)use HotPlug Storage PV for VMI(ECC Env)
Preface: 前期存储未规划好,业务快速扩展,数据高安全需求(异地,More one copy),需求多多?NM干着干着活就会时不时的坑爹起来了!particularly Real Product ...
链表-Partition List
struct ListNode* partition(struct ListNode* head, int x) { struct ListNode *p1=(struct ListNode*)mal ...
LCIS（线段树区间合并）
LCIS Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
hive 分配map数过少导致任务执行慢
数据表大概150M,但是只有几个字段,导致行数特别多,当使用正则表达式去匹配时执行较慢. 解决思路:增大map数; //设置reduce数为150,将原表分成150份,map数无法直接设置,因为和输入 ...
URL编码解码
ios url 编码和解码 1.url编码 ios中http请求遇到汉字的时候或者像是%…@#￥%&*这些字符的时候也可以使用下面的方法,需要转化成UTF-8,用到的方法是: NSString ...
Java 方法调用疑问
同一个类中同一个方法,实例化后,同时调用两次,内存分配如何?
test md
[TOC] Glossary SUT SYSTEM UNDER TEST CUT CLASS UNDER TEST MUT METHOD UNDER TEST Tests without Use of ...

【转载】设置event.cancelBubble，使触发子元素的onclick不同时触发父元素的onclick

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

随机推荐

热门专题