I created an HTML document that contains several div elements:
<div id='divTop'>
<div id='divChild'></div>
</div>
At the end of the document, I added the following JavaScript code:
var top = document.getElementById('divTop');
lib.addEvent(top, 'click', function () { alert('top'); });
var child = document.getElementById('divChild');
lib.addEvent(child, 'click', function () { alert('child'); });
var body = document.getElementsByTagName('body')[0];
lib.addEvent(body, 'click', function () { alert('body'); });
// The lib.addEvent function helps in adding event listeners to elements.
// It uses either domEl.addEventListener or domEl.attachEvent
The expected behavior is to have alerts triggered in the order of child, top, body when clicking on the child div. This works correctly in all browsers except for Chrome, where the order is child, body, top.
Is there something I am missing here? Any insights would be greatly appreciated!