D
delerious
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.addEventListener) {
// this code is for Mozilla and Opera
submenu.childNodes.addEventListener('mouseout',
disableEventPropagation, false);
}
else if (submenu.childNodes.attachEvent) {
// this code is for IE
submenu.childNodes.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;
}
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.addEventListener) {
// this code is for Mozilla and Opera
submenu.childNodes.addEventListener('mouseout',
disableEventPropagation, false);
}
else if (submenu.childNodes.attachEvent) {
// this code is for IE
submenu.childNodes.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;
}