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.stopPropa gation 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.ca ncelBubble=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="ale rt('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.getEl ementById)
submenu = document.getEle mentById('subme nu');
for (var i=0; i<submenu.child Nodes.length; i++) {
if (submenu.childN odes[i].addEventListen er) {
// this code is for Mozilla and Opera
submenu.childNo des[i].addEventListen er('mouseout',
disableEventPro pagation, false);
}
else if (submenu.childN odes[i].attachEvent) {
// this code is for IE
submenu.childNo des[i].attachEvent('o nmouseout',
disableEventPro pagation);
}
}
}
function disableEventPro pagation(event) {
if (event.stopProp agation) {
// this code is for Mozilla and Opera
event.stopPropa gation();
}
else if (window.event) {
// this code is for IE
window.event.ca ncelBubble = 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;
}
