468,532 Members | 1,653 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,532 developers. It's quick & easy.

Events problem

VK
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">
<!--
/* this to prevent ul's to take
the whole page width
so you could slip your mouse from the right */
ul { width: 10%}
-->
</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?

Jul 23 '05 #1
3 1189


VK wrote:

function test1() {
alert('MouseOut event detected');
}
function test2() {
if (window.event.toElement.tagName=='BODY') {
alert('MouseOut event detected');
}
} <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> 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?


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

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #2
VK
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.

Jul 23 '05 #3


VK wrote:

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>
If you move the mouse over a child element of a container element then
the mouseout of the container element fires.
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.


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/
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Steven Brown | last post: by
2 posts views Thread by Jon Davis | last post: by
12 posts views Thread by scsharma | last post: by
2 posts views Thread by hakan_cn | last post: by
30 posts views Thread by Burkhard | last post: by
5 posts views Thread by Paal Berggreen | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.