2010-07-13 61 views
0

我只是想了解如何捕獲和冒泡工作。爲什麼冒泡不起作用

不幸的是,這段代碼只是在IE中工作,而不是在Firefox中工作。

當我點擊div3時,它只是停止there.it不冒泡身體元素。 有人可以啓發我。

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 1</title> 
<script type="text/javascript"> 

var addEvent = function(elem, event, func, capture){ 
    if(typeof(window.event) != 'undefined'){ 
     elem.attachEvent('on' + event, func); 
    } 
    else{ 
     elem.addEventListener(event, func, capture); 
    } 
} 


var bodyFunc = function(){ 
    alert('In element body') 
} 

var div1Func = function(){ 
    alert('In element div1') 
} 

var div2Func = function(){ 
    alert('In element div2') 
} 

var div3Func = function(){ 
    alert('In element div3') 
} 


var init = function(){ 
    addEvent(document.getElementsByTagName('body')[0], 'click', bodyFunc, true); 
    addEvent(document.getElementById('div1'), 'click', div1Func, true); 
    addEvent(document.getElementById('div2'), 'click', div2Func, true); 
    addEvent(document.getElementById('div3'), 'click', div3Func, true); 
} 


addEvent(window, 'load', init, false) 


</script> 
</head> 

<body> 

<h1>Using the Modern Event Model</h1> 

<div id="div1" style="border:1px solid #000000;padding:10pt;background:cornsilk"> 

    <p>This is div 1</p> 

    <div id="div2" style="border:1px solid #000000;padding:10pt;background:gray"> 

     <p>This is div 2</p> 

     <div id="div3" style="border:1px solid #000000;padding:10pt; background:lightBlue"> 
      <p>This is div 3</p> 
     </div> 

    </div> 

</div> 


</body> 

</html> 
+0

我不確定你到底在看什麼,但是當我在FF3.6中打開頁面並點擊div3時,我看到了我期望的內容:「在元素體中」,然後「在元素div1中」然後「元素div2」,最後「元素div3」。 – RobertB 2010-12-29 22:41:45

回答

0

我不知道你看到什麼,但是當我在Win7上FF3.6打開網頁並點擊DIV 3,我看到我所期待的:「在素體」,則div1,然後是div2,最後是div3。換句話說,我在捕獲順序中看到警報。

你在IE中看到冒泡,因爲,AFAIK,IE只冒泡而從不捕獲。

您應該看到在FF中捕獲,因爲您通過傳遞「true」作爲4個addEvent調用的最後一個參數來告訴事件以捕獲模式進行偵聽。將這四個改爲「假」,你會看到冒泡的順序。