Hi there,
I'd like to create two DIVs, one inside the other and capture the
click event of the inner one. Seems it should be trivial to do but I
somehow can't manage. Below here is the code I'm using [I know that it
does not work in IE but FireFox & Opera are enough for now].
Clicking on the 'Inner' div brings up the container's event with the
expected phase (3 = bubbling) but the Inner event is not fired at all.
I feel that ther is something obvious missing but I can't figure out
what.
I would be grateful for any help and/or pointers. Thanks.
START CODE:
<html>
<head>
</head>
<body>
<script>
var containerDiv = document.createElement('div');
containerDiv.style.border = '1px black solid';
containerDiv.innerHTML = 'Container before';
var theDiv = document.createElement('div');
theDiv.innerHTML = 'Inner';
theDiv.style.border = '1px red solid';
theDiv.addEventListener('click', function(e) {alert( 'Inner '+
e.eventPhase )}, false);
containerDiv.appendChild( theDiv );
containerDiv.innerHTML += 'Container after';
containerDiv.addEventListener('click', function(e) {alert(
'Container '+ e.eventPhase )}, false);
document.body.appendChild( containerDiv );
</script>
</body>
</html>
