onMouseOut question

[Argblat]

Is there a way to define a javascript action ala onMouseOut where the action is not triggered if the mouse moves further into a nested div or table, but instead only if it moves out.

For instance, let's say you have

<div id=1 onMouseOut="do something">
<div id=2>
This is a test
</div>
</div>

In this example, the javascript will trigger when the mouse either leaves div1 or if it goes deeper into div2.

For my purposes I would like it to only trigger if it exists div1 completedly. It seems to me that since div2 is encompassed by div1 my onMouseOut should not trigger, but it seems this is not the way it has been defined.

Any help would be greatly appreciated.

-Mike

[rocknbil]

I haven't had a lot of luck with mouseover/outs of divs due to platform/browser issues. I figure out a way to do it with objects designed to react to mouse events, such as links, images inside links, or imagemaps.

BUT. . . here is some logic that may help. Set a global variable

var mouseOver=0;

Then send your mouseout to a function, but only execute if mouseOver==0;

<div id=1 onMouseOver="mouseOver=1;" onMouseOut=" mouseOver=0; doSomething();">
<div id=2 onMouseOver="mouseOver=1;">
This is a test
</div>
</div>

function doSomething() {
if (mouseOver == 0) { //REALLY do something; }
}

Note that once in the DIV, mouseOver is only set to 0 if it leaves the outer div; if it goes into the inner div, it sets it back to 1. Of course if the user moves the mouse REALLY fast and out of the div, it may fail, but this may lead you in the right direction.

[Argblat]

Thank you...

This is a good concept, and exactly what I was looking for. I will play around with it and post any results

-Mike

p.s.
I'm going to put this in every post until I get an answer...how do you put nicely formatted boxes around your code snippets in posts. I see people doing it, but I can't find how to do it in the faq

[Argblat]

So I looked at the code a little more and tried to implement it, and in doing so I'm fairly certain that the logic does not solve the problem, and runs into the same issue that I'm having.

In following the logic:

You enter the parent element [Div1] and mouseOver is set to 1.

It's coded so that when you leave Div1, mouseOver is set to 0, you call a test to check what mouseOver is equal to, and then Div2 sets mouseOver equal to 1 again.

Because of the original problem, that it is considered a mouseover to both leave the parent OR enter a child this logic does not work

As you can see, when you do call the function to check the value of mouseOver it is still equal to zero prior to Div2 [the child] getting the chance to change it back to 1.

Based on the fact that mouseOut treats leaving Div1 the same no matter if it moves into a child or out completedly, it seems to me [and please correct me if I'm wrong] that the only way to truly test to see if you have exited the parent is to test from whatever element the parent is in [like the body in this case]

This makes this solution impractical to me, and I would love to be shown that I am incorrect in my thinking.

-Mike

[xenonii]

something like this may work for you

function myMouseOut()
{
if (!event.fromElement.contains(event.toElement) &&!document.getElementById('someDivId').contains(event.toElement))
{
//do something on mouse out;
}
}

Then call this js method onmouseout of the div and give the div some id.