Problem: onmouseout being signaled w/o leaving the element!

[delerious]

I have a DIV that contains some anchors arranged vertically. On the DIV
element I have an onmouseout event handler. If I move the mouse over one of
the anchors, and then move it to another anchor (while remaining inside the
DIV), the onmouseout event handler gets triggered even though the mouse never
went outside the DIV. This happens in IE, Opera, and Mozilla.

You can see this problem for yourself here:
http://home.comcast.net/~delerious1/index4.html

Does anyone know why this is happening?

 

[rf]

I have a DIV that contains some anchors arranged vertically. On the DIV
element I have an onmouseout event handler. If I move the mouse over one of
the anchors, and then move it to another anchor (while remaining inside the
DIV), the onmouseout event handler gets triggered even though the mouse never
went outside the DIV. This happens in IE, Opera, and Mozilla.

You can see this problem for yourself here:
http://home.comcast.net/~delerious1/index4.html

Does anyone know why this is happening?

My reading of the spec at
http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.3 is that the
browser is behaving as expected. The mouse is moving "away" from the
element, that is it is moving into the nested <a> element.

What you are probably thinking of is the IE proprietry onMouseLeave event.
This only occurs when the mouse leaves the boundary of the element.

What are you trying to achieve anyway that can't be done with CSS?

Cheers
Richard.

 

[delerious]

My reading of the spec at
http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.3 is that the
browser is behaving as expected. The mouse is moving "away" from the
element, that is it is moving into the nested <a> element.

What you are probably thinking of is the IE proprietry onMouseLeave event.
This only occurs when the mouse leaves the boundary of the element.

What are you trying to achieve anyway that can't be done with CSS?

I want the entire navigation menu (the DIV element) to disappear when the
mouse leaves it. I will need to use Javascript to set the visibility to
hidden.

It appears the problem is happening because the onmouseout event on the anchor
is bubbling up to the DIV. I should be able to use window.event.cancelBubble
(for IE) or event.stopPropagation() (for Opera/Mozilla) to solve this problem.

 

[rf]

I want the entire navigation menu (the DIV element) to disappear when the
mouse leaves it. I will need to use Javascript to set the visibility to
hidden.

Wouldn't that be a silly thing to do? How would a user find the navigation
in the first place, random mouse sweeps?

Mystery meat navigation.

Cheers
Richard.

 

[delerious]

Wouldn't that be a silly thing to do? How would a user find the navigation
in the first place, random mouse sweeps?

Mystery meat navigation.

LOL. No that page doesn't contain my actual menu. It just contains simple
code that illustrates a problem. My actual menu has a main menu that never
disappears. When a user moves the mouse over one of the links in the main
menu, a submenu appears (javascript sets visibility to visible). Then the
submenu should disappear (javascript sets visibility to hidden) when the mouse
moves out of the submenu DIV.

 

[rf]

LOL. No that page doesn't contain my actual menu. It just contains simple
code that illustrates a problem. My actual menu has a main menu that never
disappears. When a user moves the mouse over one of the links in the main
menu, a submenu appears (javascript sets visibility to visible). Then the
submenu should disappear (javascript sets visibility to hidden) when the mouse
moves out of the submenu DIV.

Ah-ha. A statement of the *real* problem.

Well, you are re-inventing wheels. Go over to google and search for
"javascript pulldown menu". There are hundreds of examples there. One of
them should do what you want

One caveat: If you do this then make sure that your navigation still works
with javascript disabled.

Cheers
Richard.

 

[delerious]

Ah-ha. A statement of the *real* problem.

Well, you are re-inventing wheels. Go over to google and search for
"javascript pulldown menu". There are hundreds of examples there. One of
them should do what you want

One caveat: If you do this then make sure that your navigation still works
with javascript disabled.

Yeah I know, but I think those free javascript menus all fix the size of the
text. Isn't it poor web page design to not let the user change the text size?

 

[Toby A Inkster]

Yeah I know, but I think those free javascript menus all fix the size of the
text. Isn't it poor web page design to not let the user change the text size?

Try the one at http://devedge.netscape.com/ -- it is probably the best out
there.

 

[vtkiet05]

div onmouseout problem

Link Great!!
This is my code after referencing above link
<script type="text/javascript">
function changeImageWhenMouseOver()
{
//alert('hello over');

}
function submenuMouseoutHandler(event)
{
var toElement = null;
if (event.relatedTarget)
toElement = event.relatedTarget;
else if (event.toElement)
toElement = event.toElement;

//while (toElement && toElement.id != submenuId)
//toElement = toElement.parentNode;
while (toElement && toElement.tagName != "DIV")
toElement = toElement.parentNode;
if (!toElement)
{
alert('out of div');
}
}
</script>

<div onmouseout="submenuMouseoutHandler(event)" style="border:solid 1px #FF0000">

<a href="" onmouseover="changeImageWhenMouseOver()" >1 star</a>&nbsp;
<a href="" onmouseover="changeImageWhenMouseOver()" >2 stars</a>&nbsp;
<a href=" onmouseover="changeImageWhenMouseOver()" >3 stars</a>&nbsp;
<a href="" onmouseover="changeImageWhenMouseOver()" >4 stars</a>&nbsp;
<a href="" onmouseover="changeImageWhenMouseOver()" >5 stars</a>

</div>

Hope that help you!!

 

[blizam]

Link Great!!
This is my code after referencing above link
<script type="text/javascript">
function changeImageWhenMouseOver()
{
//alert('hello over');

}
function submenuMouseoutHandler(event)
{
var toElement = null;
if (event.relatedTarget)
toElement = event.relatedTarget;
else if (event.toElement)
toElement = event.toElement;

//while (toElement && toElement.id != submenuId)
//toElement = toElement.parentNode;
while (toElement && toElement.tagName != "DIV")
toElement = toElement.parentNode;
if (!toElement)
{
alert('out of div');
}
}
</script>

<div onmouseout="submenuMouseoutHandler(event)" style="border:solid 1px #FF0000">

<a href="" onmouseover="changeImageWhenMouseOver()" >1 star</a>&nbsp;
<a href="" onmouseover="changeImageWhenMouseOver()" >2 stars</a>&nbsp;
<a href=" onmouseover="changeImageWhenMouseOver()" >3 stars</a>&nbsp;
<a href="" onmouseover="changeImageWhenMouseOver()" >4 stars</a>&nbsp;
<a href="" onmouseover="changeImageWhenMouseOver()" >5 stars</a>

</div>

Hope that help you!!

I have found a simple work around you may try.

On the DIV element, use
onmouseout="javascript:if(myBrowser=='Netscape'){switchImageFunction(image);}"
Just include in your .js file or <head> tag,
'var myBrowser = navigator.appName;'
This way Firefox, Safari, and Opera will use the onmouseout event.

IE uses "onMouseLeave" so add it to the div tag as
onMouseLeave="switchImageFunction(image);"

 

[blizam]

simple work-around you may try.

In the DIV element tag, use
onmouseout="javascript:if(myBrowser=='Netscape'){switchImageFunction(image);}"
--IE ignores the call to the function

Just include in your .js file or <script> tag,
var myBrowser = navigator.appName;
This way Firefox, Safari, and Opera will use the onmouseout event.

IE uses "onMouseLeave" so add it to the div tag as
onMouseLeave="switchImageFunction(image);"

 

[Steve_Newcastle]

My solution

I have or had the self same problem and am develloping what seems to a very similar idea. My answer was to get rid of 'onMouseOut' from the sub menu. Instead when I select a new item from the main menu the scrpt is activated and the old sub menu is made invisible and the newly selected one is made visible. It does seem odd that CSS rules applied to the container i.e. background-color effect all the sub elements in the conatiner whereas onMouseOut does not - most confusing.