473,385 Members | 1,912 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

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 1342


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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Steven Brown | last post by:
I'm trying to figure out how to safely use .NET events/delegates in a thread-safe class. There are a couple problems. One is that the standard "if(EventName != null) EventName(...);" call can...
5
by: knocte | last post by:
Hello. I am a web developer very worried about "bloat code" and "languages mixture". So, since some time, I always try to avoid completely the use of javascript in XHTML/HTML files. This leads...
2
by: Jon Davis | last post by:
The garbage handler in the .NET framework is handy. When objects fall out of scope, they are automatically destroyed, and the programmer doesn't have to worry about deallocating the memory space...
0
by: Efim | last post by:
Hi, I have got some problem with sending of events in .NET. I am using remouting. The client has got 2 objects for receiving different types of events (responses and events) The server has got...
12
by: scsharma | last post by:
Hi, I am working on creating a webapplication and my design calls for creating main webform which will have menu bar on left hand side and a IFrame which will contain all the forms that are shown...
2
by: hakan_cn | last post by:
Hi all! Sorry for the cross-post, I really have a difficult problem and need some help badly. I have a VB6 ActiveX component (dll) that listens to a real-time data feed of stock quotes (built...
30
by: Burkhard | last post by:
Hi, I am new to C# (with long year experience in C++) and I am a bit confused by the language construct of events. What is it I can do with events that I cannot do with delegates? At the moment...
5
by: Paal Berggreen | last post by:
I am involved with development of a Portal solution using ASP.NET 2.0 and WebParts. The WebParts framework use the default personalization providers, and the personalization data thus ends up in...
3
by: daan | last post by:
Hello, I have a problem and I can't get the solution for it :( I have a com dll, which i imported as a reference. The com object is part of a class which is multithreaded and will create...
0
by: hmm | last post by:
Hi all I have two problems: Problem #1: I'm using a .NET Form with the property 'FormBorderStyle' set to 'None'. The idea is to completely cover the area of that Form with a UserControl. In...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.