Having a nightmare trying to figure out event Bubbling..
<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! 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>
From what I understand clicking in the area inside the red border should trigger all 3 event handlers (red, blue & body), only red and body are triggered..
I have tried altering the third value of addEventListener and changing the return values but to no avail, any ideas?
The red div should be inside (structurally in your HTML, not visually) for the event to propagate to the blue div.