event.stopPropagation() does not work [Archive]

delerious

12-11-2003, 04:27 AM

I have a DIV that contains some links. I have an onmouseout event handler on the DIV, and I want it triggered only when the mouse leaves the DIV. Since there are Anchors in the DIV, onmouseout events will be generated when the mouse moves from one link to another, and those events will bubble up to the DIV. According to all the documentation that I have read, I should be able to prevent that from happening by having an onmouseout event handler for each of the anchors, and calling event.stopPropagation in the event handler. But it is not working in Mozilla and Opera, the onmouseout still bubbles up from the anchor to the DIV. I have it working in IE, but that is because IE does not support stopPropagation(), and instead uses window.event.cancelBubble=true, which Mozilla and Opera do not support.

Does anyone have any clue why stopPropagation() isn't working in Mozilla and Opera?

You can see the problem in action here:
http://home.comcast.net/~delerious1/index4.html

Here is my HTML code:

<BODY onload="init()">
<DIV id="submenu" onmouseout="alert('Mouse has just left the DIV')">
<A href="fakepage.html">LINK 1</A>
<A href="fakepage.html">LINK 2</A>
<A href="fakepage.html">LINK 3</A>
<A href="fakepage.html">LINK 4</A>
<A href="fakepage.html">LINK 5</A>
</DIV>
</BODY>

Here is my Javascript code:

function init() {
var submenu = null;
if (document.getElementById)
submenu = document.getElementById('submenu');

for (var i=0; i<submenu.childNodes.length; i++) {
if (submenu.childNodes[i].addEventListener) {
// this code is for Mozilla and Opera
submenu.childNodes[i].addEventListener('mouseout', disableEventPropagation, false);
}
else if (submenu.childNodes[i].attachEvent) {
// this code is for IE
submenu.childNodes[i].attachEvent('onmouseout', disableEventPropagation);
}
}
}

function disableEventPropagation(event) {
if (event.stopPropagation) {
// this code is for Mozilla and Opera
event.stopPropagation();
}
else if (window.event) {
// this code is for IE
window.event.cancelBubble = true;
}
}

Here is the stylesheet I am using:

DIV {
background-color: red;
left: 10px;
top: 10px;
position: absolute;
}

A {
background-color: blue;
color: white;
display: block;
margin: 0 0 5px 0;
text-decoration: none;
}

A:hover {
background-color: cyan;
}