Events problem

#1 July 23rd, 2005, 08:49 PM

To PointedEars with my deep respect.
Author ;-)

There were a question a while ago about events. Now I see that my
original explanation was not full. Check this sample out:

<html>
<head>
<title>Event test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script>
function test1() {
alert('MouseOut event detected');
}
function test2() {
if (window.event.toElement.tagName=='BODY') {
alert('MouseOut event detected');
}
}
</script>
<style type="text/css">

</style>
</head>
<body bgcolor="#FFFFFF">
<h4>Test Case 1</h4>
<ul onmouseout="test1()">
<li><a href="bogus1.html">Item 1</a></li>
<li><a href="bogus2.html">Item 2</a></li>
<li><a href="bogus3.html">Item 3</a></li>
</ul>
<h4>Test Case 2</h4>
<ul onmouseout="test2()">
<li><a href="bogus1.html">Item 1</a></li>
<li><a href="bogus2.html">Item 2</a></li>
<li><a href="bogus3.html">Item 3</a></li>
</ul>
</body>
</html>

Test Case 1 was made (as I stronly believe) in the way anyone would try
first to capture onMouseOut event from a list (function test1).
Nevertheless this test case doesn't work at all.
First of all, it gets a fountain of events not only from the <ul>, but
from all underlaying elements (<a>'s here) as well.
Secondly, it gets MOUSEOUT event in case of MOUSEOVER event: when mouse
enters to the <ul> area! The last nonsence took a cup of strong coffee
from me before I recalled the implemented "compatibility scheme". Now
events are simultaneously "bubbling" from the bottom to the top (IE
scheme) as well as "falling down" from the top to the bottom (broken
parts taken from NN4).
So when I move my mouse OVER the <ul>, I leaving the body area, and
this OUT event received by window (NN top-to-bottom scheme) is being
delivered down to the <ul>. It's getting crazy even reading this, is
not it?

Any way, test2() solves the problem by examining event's property, but
it uses IE proprietary properties.

Any semi-simple universal solution for this case?

#2 July 23rd, 2005, 08:50 PM

VK wrote:

[color=blue]
> function test1() {
> alert('MouseOut event detected');
> }
> function test2() {
> if (window.event.toElement.tagName=='BODY') {
> alert('MouseOut event detected');
> }
> }[/color]
[color=blue]
> <ul onmouseout="test1()">
> <li><a href="bogus1.html">Item 1</a></li>
> <li><a href="bogus2.html">Item 2</a></li>
> <li><a href="bogus3.html">Item 3</a></li>
> </ul>
> <h4>Test Case 2</h4>
> <ul onmouseout="test2()">
> <li><a href="bogus1.html">Item 1</a></li>
> <li><a href="bogus2.html">Item 2</a></li>
> <li><a href="bogus3.html">Item 3</a></li>
> </ul>[/color]
[color=blue]
> Any way, test2() solves the problem by examining event's property, but
> it uses IE proprietary properties.
>
> Any semi-simple universal solution for this case?[/color]

Check out
<http://www.faqts.com/knowledge_base/view.phtml/aid/1606/fid/145>

--

Martin Honnen
http://JavaScript.FAQTs.com/

#3 July 23rd, 2005, 08:50 PM

Well, I guess my Nobel prise went to you...

Still I think that your problem description is not totally correct:
<quot>
This means that the problem is not just about bubbling, because when
you mouse the mouse over the link, you are not moving out of anything
contained in the div nor are you moving out of the area contained by
the div. A mouseout event fires simply because a mouseover event fires
for another element.
</quot>

As my preliminary (I'm just 3 days on my vacations :-) experiments have
shown, the problem is in the "compatibility mode":
Any event gets cloned, and after that both copies are playing "first
train is going from point A, second train is going from point C". Other
words, one copy goes "NN way" top-to-bottom (window -> deepest
element), other copy goes "IE way" bottom-to-top (deepest element ->
window). If you are trying to capture events somewhere in the point B:
A_______________B___________________C

then both trains are passing you in both directions leaving you with
big eyes on the platform.

#4 July 23rd, 2005, 08:50 PM

VK wrote:

[color=blue]
> Still I think that your problem description is not totally correct:
> <quot>
> This means that the problem is not just about bubbling, because when
> you mouse the mouse over the link, you are not moving out of anything
> contained in the div nor are you moving out of the area contained by
> the div. A mouseout event fires simply because a mouseover event fires
> for another element.
> </quot>[/color]

If you move the mouse over a child element of a container element then
the mouseout of the container element fires.
[color=blue]
> As my preliminary (I'm just 3 days on my vacations :-) experiments have
> shown, the problem is in the "compatibility mode":
> Any event gets cloned, and after that both copies are playing "first
> train is going from point A, second train is going from point C". Other
> words, one copy goes "NN way" top-to-bottom (window -> deepest
> element), other copy goes "IE way" bottom-to-top (deepest element ->
> window). If you are trying to capture events somewhere in the point B:
> A_______________B___________________C
>
> then both trains are passing you in both directions leaving you with
> big eyes on the platform.[/color]

While Netscape 6/7 and Opera 7/8 both implement the W3C DOM Level 2
Events where events do not only bubble up the tree but first move down
the tree any code using HTML event handler attributes e.g.
<element onmouseover="..." onmouseout="..."
is only noticing the bubbling phase.

So the problem you experience has nothing to do with the capturing phase
of the W3C DOM events module, it is simply that mouseout/mouseover
always occur in pairs, if you move the mouse over a child then a
mouseout on the container is first fired, then a mouseover on the child.

--

Martin Honnen
http://JavaScript.FAQTs.com/

Events problem

re: Events problem

re: Events problem

re: Events problem

/bytes/development

/bytes/it

/bytes/about