onmouseout executed although mouse doesn't leave

**streamkid** · 06-15-2010 01:44 PM

OK that's my HTML:

Code:

	<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** · 06-15-2010 03:44 PM

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** · 06-15-2010 03:48 PM

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

**streamkid** · 06-15-2010 05:50 PM

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

HTML

Code:

<div id="menubar" onmouseover="show_menu()" onmouseout="hide_menu()">
<p id="current">Καλώς ήλθατε. Βρίσκεστε στην αρχική σελίδα.</p>
<ul id="menu">
	<li><a href="#">Blah</a></li>
	<li><a href="#">Halb</a></li>
</ul>
</div>

CSS:

Code:

div#menubar p#current
{
	display: inline;

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

JS:

Code:

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** · 06-16-2010 02:47 AM

as Awais-Muzaffar said

Code:

<!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">Καλώς ήλθατε. Βρίσκεστε στην αρχική σελίδα.</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** · 06-16-2010 11:21 AM

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** · 06-16-2010 11:23 AM

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** · 06-16-2010 11:36 AM

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** · 06-16-2010 11:37 AM

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

**SparoHawk** · 06-16-2010 11:41 AM

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:

Code:

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.

Thread: onmouseout executed although mouse doesn't leave

Thread Tools

Display

onmouseout executed although mouse doesn't leave

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions