event.cancelBubble

 

关于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" 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阻止事件冒泡2007年07月02日 星期一 上午 11:17event.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><href="#"><span>Bubbllllllllllllllle</span></a></li> 
    
<li><href="#"><span>Bubbllllllllllllllle</span></a></li> 
</ul> 
</div> 
<textarea></textarea> 
<p>鼠标进入UL的任何一个子元素,如果不停止冒泡,我们从UL到SPAN都定义了鼠标悬停(<code>mouseover</code>)事件,这个事件会上升了UL,从而从鼠标所进入的元素到UL元素都会有红色的边。</p> 
<div> 
<ul> 
    
<li><href="#"><span>Bubbllllllllllllllle</span></a><input type="text" value="aaa"></li> 
    
<li><href="#"><span>Bubbllllllllllllllle</span></a></li> 
</ul> 
</div> 
<p>如果停止冒泡,事件不会上升,我们就可以获取精确的鼠标进入元素。</p> 
</body> 
</html> 
                                                                                                                                                                                                    文章来自网上。

posted on 2008-11-28 10:16 猎人 阅读(472) 评论(0)  编辑  收藏 所属分类: js整理


只有注册用户登录后才能发表评论。


网站导航:
 
<2025年7月>
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

导航

统计

留言簿

随笔分类

文章分类(4)

文章档案(4)

搜索

最新评论