以文本方式查看主题

-  ╋艺 镇╋  (http://zyzsky.com/bbs/index.asp)
--  ┣◇网站建设&Web语言  (http://zyzsky.com/bbs/list.asp?boardid=4)
----  关于event.cancelBubble的描述  (http://zyzsky.com/bbs/dispbbs.asp?boardid=4&id=2373)
--  作者：乐魔舞
--  发布时间：2010/10/14 11:33:40
--  关于event.cancelBubble的描述
 

由于HTML中的对象都是层次结构，比如一个Table包含了多个TR，一个TR包含了多个TD.

Bubble就是一个事件可以从子节点向父节点传递，比如鼠标点击了一个TD，当前的event.srcElement就是这个TD，但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件，但是如果你event.cancelBubble，则就不能上传事件。

举个简单的例子：

比如你没有用CSS，但是想同意改变你的页面上的所有按钮的属性，你可以在页面load完毕后使用在body中使用onmouseover方法统一改变鼠标在按钮上和离开后的style，而不用对每个按钮都写一边。

更加精准的描述

a   lot   of   events   are   passed   upward   through   the   DOM   object   structure,   but   you   can   use   event.cancelBubble=true   to   stop   this   "bubbling".   For   example,   if   you   click   on   the   following   button,   the   alert   message   boxes   in   both   the   button\'s   onclick   event   handler   and   the   document\'s   onclick   event   handler   will   be   displayed.   But   if   you   uncomment   the   cancelBubble   line,   you   will   only   see   the   alert   box   in   the   button\'s   event   handler   get   displayed: 

 程序如下：
<body onmouseover=mouse_over() onmouseout=mouse_out()>

  <script   language="javascript">  

  function   document.onclick()  

  {  

      alert("in   the   document\'s   event   handler!");  

  }  

   

  function   clickMe()  

  {  

      alert("in   the   button\'s   event   handler!");  

      //event.cancelBubble   =   true;  

  }  

  </script>    

  <input   type="button"   value="click   me"   >

< span>

例:

<html>
<head>
<meta http-equiv="Content-Type" c>
<meta name="Keywords" c>
<title>event.cancelBubble－</title><body>
<span onclick=alert("你好")>点我 <span>再点我</span></span><br><br>

<span onclick=alert("你好")>点我 <span onclick=event.cancelBubble=true;>再点我</span></span>

<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="Button" value="查看源代码" ></div>
</body>

</html>
--  作者：乐魔舞
--  发布时间：2010/10/14 15:04:20
--  
案例二：
下面的代码片断演示了当在图片上点击（onclick）时，如果同时shift键也被按下，就取消上层元素（body）上的事件onclick所引发的showSrc()函数。

<!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">
<head>
<meta http-equiv="Content-Type" c />
<title>无标题文档</title>
</head>
<SCRIPT LANGUAGE="JScript">
function checkCancel() {
    if (window.event.shiftKey)
    window.event.cancelBubble = true;
}
function showSrc() {
    if (window.event.srcElement.tagName == "IMG")
    alert(window.event.srcElement.src);
}
</SCRIPT>
<BODY >
<IMG src="http://www.zyzsky.com/bbs.gif">
</body>
</html>