event.cancelBubble的理解 -CSDN博客

本文链接：https://blog.csdn.net/iblike/article/details/83853243

关于event.cancelBubble2007-09-07 11:45由于HTML中的对象都是层次结构，比如一个Table包含了多个TR，一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递，比如鼠标点击了一个TD，当前的event.srcElement就是这个TD，但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件，但是如果你event.cancelBubble，则就不能上传事件。例子：

<html> 
<body> 
<table border="1" width="26%" id="tableA" οnclick="alert('tableA')"> 
<tr οnclick="tableA_rowA_click()"> 
   <td width="106">一般</td> 
</tr> 
<tr οnclick="tableA_rowB_click()"> 
   <td width="106">阻止消息上传</td> 
</tr> 
</table> 
</body> 
</html> 
<!--   --> 
<mce:script language="javascript"><!--
 
function tableA_rowA_click(){ 
alert('tableA_rowA'); 
} 
function tableA_rowB_click(){ 
alert('tableA_rowB'); 
event.cancelBubble=true; 
}
// --></mce:script>

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

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>event.cancelBubble</title> 
<mce:style><!--
 
* {font:menu}
--></mce:style><style mce_bogus="1"> 
* {font:menu}</style> 
</head> 
<body> 
<span οnclick=alert("你好")>点我 <span>再点我</span></span><br><br> 
<span οnclick=alert("你好")>点我 <span οnclick=event.cancelBubble=true;>再点我</span></span> 
</body> 
</html>

下面再看一个例子：

<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> 
<mce:style type="text/css" media="screen"><!--
 
div * {display:block; margin:4px; padding:4px; border:1px solid white;} 
textarea {width:20em; height:2em;} 
--></mce:style><style type="text/css" media="screen" mce_bogus="1"> 
div * {display:block; margin:4px; padding:4px; border:1px solid white;} 
textarea {width:20em; height:2em;} </style> 
<mce:script type="text/javascript"><!--
 
      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;
// --></mce: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="#" mce_href="#"><span>Bubbllllllllllllllle</span></a></li> 
    <li><a href="#" mce_href="#"><span>Bubbllllllllllllllle</span></a></li> 
</ul> 
</div> 
<textarea></textarea></p>
<p>鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（<code>mouseover</code>）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边。</p>
<div> 
<ul>
<li><a href="#" mce_href="#">Bubbllllllllllllllle</a></li>
<li><a href="#" mce_href="#">Bubbllllllllllllllle</a></li>
</ul>
</div>
<p>如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。</p></body> 
</html>