Javascript 事件冒泡未按预期工作答案

【问题标题】：Javascript Event Bubbling Not Working As ExpectedJavascript 事件冒泡未按预期工作
【发布时间】：2010-05-19 13:13:00
【问题描述】：

做了一场噩梦，试图弄清楚事件冒泡..

Full test case:

<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 的第三个值并更改返回值但无济于事，有什么想法吗？

【问题讨论】：

如果不花时间检查规范，我不会发誓，但我相信事件会通过 DOM 层次结构冒泡，而不是通过布局。

标签： javascript dom-events event-bubbling event-propagation

【解决方案1】：

红色 div 应该在内部（在 HTML 结构中，而不是视觉上），以便事件传播到蓝色 div。

【讨论】：