onmouseout executed although mouse doesn't leave

This site is best viewed in a modern browser with JavaScript enabled.

onmouseout executed although mouse doesn't leave

streamkid

OK that's my HTML:

	<div id="menubar" onmouseover="show_menu()" onmouseout="hide_menu()">
				<p id="current">Welcome</p>
				<ul id="menu">
					<li><a href="#">Blah</a></li>
					<li><a href="#">Halb</a></li>
				</ul>
			</div>

and I have two JS functions.
The unexpected behavior-problem is that wherever the pointer moves between the the <li> elements (next or previous), the whole hide_menu() and show_menu() is executed as if the pointer got out of the div space and re-entered.
Any idea why this happens?

Testing on Safari 5 and FF 3.58

tirna

sounds really strange unless it is some browser specific "feature".

If you post all your html, js and css hopefully we will see what else might be going on.

Awais-Muzaffar

This is known as bubbling. More information here: http://www.quirksmode.org/js/events_order.html

streamkid

Ok let me show the code first, although it doesn't really matter:

HTML

<div id="menubar" onmouseover="show_menu()" onmouseout="hide_menu()">
<p id="current">&#922;&#945;&#955;&#974;&#962; &#942;&#955;&#952;&#945;&#964;&#949;. &#914;&#961;&#943;&#963;&#954;&#949;&#963;&#964;&#949; &#963;&#964;&#951;&#957; &#945;&#961;&#967;&#953;&#954;&#942; &#963;&#949;&#955;&#943;&#948;&#945;.</p>
<ul id="menu">
	<li><a href="#">Blah</a></li>
	<li><a href="#">Halb</a></li>
</ul>
</div>

CSS:

div#menubar p#current
{
	display: inline;

}
div#menubar ul#menu
{
	display: none;
}
/* rest is styling */
/* PS: div size is fixed */

JS:

function show_menu()
{
	document.getElementById('current').style.display = 'none';
	menu = document.getElementById('menu');
	menu.style.visibility = 'hidden';
	menu.style.display = 'block';
	set_opacity(menu, 0);
	menu.style.visibility = 'visible';
	fade_in('menu', 0, 30);
}

function hide_menu()
{
	document.getElementById('menu').style.display = 'none';
	document.getElementById('current').style.display = '';
}

Representation:
+—————————————+
|…………………………………………| That's my div. No matter what's displayed in the
+—————————————+ DIV, either the <p> or the <ul>, as long as the mouse doesn't leave the block is shouldn't run the js again and again.

So, when my DIV is like
+—————————————+
|LI~LI~LI~LI~LI~LI~LI~LI|
+—————————————+
when the mouse goes from one LI to another, the JS is run again and again. Why?

There is no hint of bubbling or capturing, as the is only one handler, the one of the DIV.

vwphillips

as Awais-Muzaffar said

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

function hide_menu(obj){
 var e=window.event||arguments.callee.caller.arguments[0];
 if (e){
  var eobj=e.relatedTarget||e.toElement;
  if (eobj){
   while (eobj.parentNode){
    if (eobj==obj){
     return false;
    }
    eobj=eobj.parentNode;
   }
  }
 }
 document.Show.Show0.value=vic++;
}

/*]]>*/
</script>

</head>

<body>
<div id="menubar" onmouseout="hide_menu(this)">
<p id="current">&#922;&#945;&#955;&#974;&#962; &#942;&#955;&#952;&#945;&#964;&#949;. &#914;&#961;&#943;&#963;&#954;&#949;&#963;&#964;&#949; &#963;&#964;&#951;&#957; &#945;&#961;&#967;&#953;&#954;&#942; &#963;&#949;&#955;&#943;&#948;&#945;.</p>
<ul id="menu">
	<li><a href="#">Blah</a></li>
	<li><a href="#">Halb</a></li>
</ul>
</div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:420px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>
</body>

</html>

SparoHawk

The problem might be that when you open the menu. If the menu opens under the mouse then you are effectively leaving the <li> since the mouse just entered the menu's <div>.

streamkid

OK but since the menu thing is contained in another div, no matter if I leave the LI space, it shouldn't execute, since the handlers are for leaving the container div space.

Right?

SparoHawk

Thing is, even if the menu is contained within the <div> with the event, moving the mouse over that <li>, or <ul> or <p> triggers the mouse out.

Remember each HTML element is like a layer (w/o involving CSS position and z-index).

The <div> is at the lowest level while the <p> and <ul> are above it. Even if they are within <div> they are a different element, therefore triggering the mouse out event of the <div>.

streamkid

Oh, I see.
Any idea on how to overcome that?

SparoHawk

Yes, like vwphillips shows, you have to use event propagation. That is, when the mouse out is detected check to see whether is that element belongs or not to the one who called it.

Check the script made by vwphillips:

function hide_menu(obj)
{
    var e = window.event || arguments.callee.caller.arguments[0];

if (e)
{
    var eobj = e.relatedTarget || e.toElement;

    if (eobj)
    {
        while (eobj.parentNode)
        {
            if (eobj==obj)
            {
                 return false;
            }

            eobj = eobj.parentNode;
        }
    }
}

document.Show.Show0.value = vic++;
}

Works as follows:
When the mouseout event is called grab the window.event and lets see who called it (obj).
Now, let's see which element was focused that triggered the mouseout event (eObj).

While eObj has a parentNode, cycle through them. If at any point you find that eObj is contained withing obj (eObj == obj), then stop the script (return false), other wise, close the menu.