onmouseout handler in list (quite strange)

50295 · May 8, 2005

Hi!

Javascript is doing something funny here. I expect that the onmouseout
handler "leave" should be called only when the mosuse has left the
entire list UL, but its triggered everytime, I move from one LI element
to the other. Why is this so?

Actually, I'm working on a collapsable menu (too long to post), and the
plan is to have make the onmouseout handler do the collapsing, and its
working excellently in IE, but not quite as well in NN, and FF.
Sometimes, the menu collapses when I move out, and at other times not.
Is there a Mozilla CSS fix for this? You know like -moz-user-select?
....

Thanks

- Olumide

////////////// HTML code ///////////////

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>

<script type="text/javascript">

function leave() {
alert("I left");
}

</script>

<STYLE>
li {
background-color: #FFFFFF;
font-weight: normal;
font-family: arial;
font-size: 12px;

text-align: center;
margin: 0;
padding: 0;
border: 1px solid black;
}

ul{
margin: 0;
padding: 0;
list-style: none;
width: 200px;
}

a {
display: block;
width: 200px;
text-decoration: none;
color: #000000;
}

</STYLE>

</head>

<body>

<ul onMouseOut="leave()">
<li><a href="#">Europe</a></li>
<li><a href="#">Africa</a></li>
<li><a href="#">America</a></li>
<li><a href="#">Asia</a></li>
</ul>

</body>
</html>

McKirahan · May 8, 2005

Hi!

Javascript is doing something funny here. I expect that the onmouseout
handler "leave" should be called only when the mosuse has left the
entire list UL, but its triggered everytime, I move from one LI element
to the other. Why is this so?

Actually, I'm working on a collapsable menu (too long to post), and the
plan is to have make the onmouseout handler do the collapsing, and its
working excellently in IE, but not quite as well in NN, and FF.
Sometimes, the menu collapses when I move out, and at other times not.
Is there a Mozilla CSS fix for this? You know like -moz-user-select?
...

Thanks

- Olumide

[snip]

I can't answer your question but:

a) under IE5.5 I get two alerts for each MouseOut;

b) removing "border: 1px solid black;" gives only one alert;

c) Firefix always gives only one alert per LI;

d) Netscape 6.2.2 doesn't give any alerts either way.

Fred Oz · May 9, 2005

Hi!

Javascript is doing something funny here. I expect that the onmouseout
handler "leave" should be called only when the mosuse has left the
entire list UL, but its triggered everytime, I move from one LI element
to the other. Why is this so?

Actually, I'm working on a collapsable menu (too long to post), and the
plan is to have make the onmouseout handler do the collapsing, and its
working excellently in IE, but not quite as well in NN, and FF.
Sometimes, the menu collapses when I move out, and at other times not.
Is there a Mozilla CSS fix for this? You know like -moz-user-select?
....

Thanks

[...]

There are some pure CSS menus here:

<URL:http://www.stylephreak.com/index.php/archives/2004/05/css-only-branching-menu/>

<URL:http://www.howtocreate.co.uk/tutorials/testMenu.html>

For an explanation of the differences between the IE and Geko event
models:

<URL:http://www.quirksmode.org/>

Follow the links: JavaScript -> Events

or start here (no frames):

<URL:http://www.quirksmode.org/js/introevents.html>

Be prepared for a lot of reading and play, but if you want to
understand events...

Lastly, using mouseover/out to trigger DHTML menus in Geko browsers
is notoriously flakey if you don't know what you are doing.

Jimnbigd · May 12, 2005

Odd. It fails for me too. But I got it to work by adding a dummy
onMouseOver:
<ul onMouseOver=() onMouseOut="leave()">
I am using IE.
....Jim Lee, Dallas, TX...

VK · May 13, 2005

Because the events are "bubbling" in the modern event model (IE as well
as all wonnabes). Other word, an event "bubble" pops up from the
deepest inderlaying element which is visible and enabled (<a> in your
case) and goes through the whole document structure to the very top
(which is window).
This very questionnable system is real easy for a privitive events
handling in a simple document (this is why it eventually won). From the
other side it makes a terrible mess in more or less complicated
situations.
An evident solution would be to do events "back tracing" to find out
which element really produced the event. Unfortunately it's nearly
impossible. W3 solution is done in unnecessary complicated and
contradicting way (as many other things they did). And IE "pseudo-W3"
solution is simply broken and I don't see any attempts to fix it over
the last two years.

You may use IE-exclisive solution this way:

function leave() {
if (window.event.toElement.tagName=='BODY') {
alert('Gocha!");
}
}
/* A question for million $: what if your list is not on the page
itself, but within another element like say <div>? You need to update
tagName== to the appropriate tag name. As you can see, IE proprietary
model sucks too. */

Thomas 'PointedEars' Lahn · May 15, 2005

VK said:
[Event bubbling]
This very questionnable system is real easy for a privitive events
handling in a simple document (this is why it eventually won). From the
other side it makes a terrible mess in more or less complicated
situations.

Probably you are not willing to explain why you distribute such FUD here.

PointedEars

Not sure why drop-down is not working.	2	Mar 24, 2024
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
I need help fixing my website	2	Oct 15, 2023
Dropdown menu in a fixed navbar	2	Apr 1, 2024
Horizontal menu bar header	2	May 12, 2021
Problems with css menu options	2	Nov 19, 2025
Need help with code on website (noob)	2	Jul 18, 2022
I have a problem here at ()	4	Dec 29, 2024

onmouseout handler in list (quite strange)

50295

McKirahan

Fred Oz

Jimnbigd

VK

Thomas 'PointedEars' Lahn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads