JavaScript事件冒泡工作不正常

<html> 
<head> 
<script type="text/javascript"> 
function $(ob) { return document.getElementById(ob) } 

function bodyClick() 
{ 
    $('win_clicks').value = parseInt($('win_clicks').value) + 1; 
} 

window.addEventListener('load',function(e) 
{ 
    $('bl_lnk').addEventListener('click',function (e) 
    { 
    $('bl_lnk_clicks').value = parseInt($('bl_lnk_clicks').value) + 1; 
    }, true); 

    $('rd_lnk').addEventListener('click',function (e) 
    { 
    $('rd_lnk_clicks').value = parseInt($('rd_lnk_clicks').value) + 1; 
    }, false); 

}, false); 
</script> 
</head> 

<body onclick="bodyClick();" style="font:16px Tahoma"> 

<div id="bl_lnk" style="position:absolute; width:250px; top:100px; left:50%; margin-left:-125px; padding:20px; background:#AAFFFF; border:1px solid #55AAFF; text-align:center; cursor:pointer"> 
    I'm a link, Click me! &nbsp; &nbsp; &nbsp; &nbsp; and me! 
</div> 

<div id="rd_lnk" style="-moz-border-radius:40px; border-radius:50px; position:absolute; width:60px; height:40px; top:103px; left:50%; margin-left:77px; padding:5px; border:3px solid #FF6666; cursor:pointer"></div> 

<div style="position:absolute; width:250px; top:200px; left:50%; margin-left:-125px; padding:20px; background:#fff6bf; border:1px solid #FFD324;"> 
    <table cellspacing="10"> 
    <tr> 
     <td>Blue Link Clicks:</td> 
     <td><input type="text" id="bl_lnk_clicks" value="0" style="width:35px; border:0; background:transparent" /></td> 
    </tr> 
    <tr> 
     <td>Red Link Clicks:</td> 
     <td><input type="text" id="rd_lnk_clicks" value="0" style="width:35px; border:0; background:transparent" /></td> 
    </tr> 
    <tr> 
     <td>Body Clicks:</td> 
     <td><input type="text" id="win_clicks" value="0" style="width:35px; border:0; background:transparent" /></td> 
    </tr> 
    </table> 
</div> 

</body> 
</html>

從我瞭解一下該區域的紅色邊框內應觸發所有3事件處理程序（紅，藍&體），只有紅色和身體被觸發..

我試圖改變的addEventListener的第三值和改變返回值，但無濟於事，任何想法？

來源

2010-05-19 Dean Bayley

我不會在沒有投入時間的情況下發誓，我沒有檢查規範，但我相信事件會通過DOM層次結構進行冒泡，而不是通過佈局。 – Quentin 2010-05-19 13:17:13

紅色的div應該是內部（結構在你的HTML，而不是視覺）的事件傳播到藍格。

來源

2010-05-19 13:17:22

JavaScript事件冒泡工作不正常

回答

相關問題