FireFox event model failure

My original idea of two trains, however pictural it was, appeared to be
wrong. The truth seems to be even more chaotic.

IE implements its standard down-up model: any mouse event goes from the
deepest visible element to the top. By carefully studying fromElement
and toElement properties, one can handle events on any point of their
way up.

NN/FF implements a "Russian hills" style: mouse events go first
up->down (window->deepest element), and right away after that it goes
down->up (deepest element->window). On theory you can handle events
during any phase on any level. On practice this implementation has some
major flaws. I don't have NN handy right now, but in FF we have:

SomeElement.addEventListener('mouseout', test, true)

This statement supposedly forces test() to capture events on the
up->down phase. A simple test show that it fails to work. Both
addEventListener('mouseout', test, true) and
addEventListener('mouseout', test, false) capture only down->up phase
(bubbling).
Eine Frage fuer Million Dollar: what the first phase for anyway?
The real killer is here: event object in FF is not exposed to inline
event capturers!
<ul onMouseOver="f1()" onMouseOut="f2()"> as well as
<ul onMouseOver="f1(e)" onMouseOut="f2(e)">
gives you undefined for e.
Thus inline capturers are really good for nothing in FF, except maybe
for alert("Hello world!") stuff. I don't know where did they get
such idea, certainly not from my books and not from W3 papers.
I also guess that the event object in this case is not exposed neither
to the user nor to the program core itself. This explains why inline
capturers randomly fail to work depending on the mouse movement
direction and even movement speed.

This actually answers my question: is there a simple universal way to
handle events from inline capturers? The answer is: NO, because of FF
global failure.

For a situation like
<ul id="UL1">
<li><a href="javascript:void(0)">Item 1</a></li>
<li><a href="javascript:void(0)">Item 2</a></li>
<li><a href="javascript:void(0)">Item 3</a></li>
</ul>
the only way to properly handle mouse events from <ul> is to attach
event handlers on onload, and later study target properties to see if
this event really from <ul> or from some underlaying element.

Jul 23 '05 #1

Subscribe Post Reply

5645

Test case for phase capture failure below.
Move mouse over the list 1 and 2. Expected:
list 1 eventPhase = 1 (Charly down)
list 2 eventPhase = 2 (Charly up)
(actually should be 2 and 3 by W3, but it's ok, they decided to keep
first element on 0)

Results: eventPhase = 2 in both case (Charly up)
<html>
<head>
<title>FireFox test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script>
var out = null;
function init() {
out = document.forms[0].elements[0];
document.getElementById('UL1').addEventListener('m ouseout',test,true);

document.getElementById('UL2').addEventListener('m ouseout',test,false);
}

function test(e) {
out.value+= e.eventPhase + ' ';
}
</script>
<style type="text/css">

</style>
</head>
<body bgcolor="#FFFFFF" onload="init()">
<h4>Test Case</h4>
<ul id="UL1">
<li><a href="javascript:void(0)">Item 1</a></li>
<li><a href="javascript:void(0)">Item 2</a></li>
<li><a href="javascript:void(0)">Item 3</a></li>
</ul>
<ul id="UL2">
<li><a href="javascript:void(0)">Item 1</a></li>
<li><a href="javascript:void(0)">Item 2</a></li>
<li><a href="javascript:void(0)">Item 3</a></li>
</ul>
<form>
<textarea cols="50" rows="4"></textarea>
</form>
<p> </p>
</body>
</html>

Jul 23 '05 #2

Martin Honnen

VK wrote:

Test case for phase capture failure below.
Move mouse over the list 1 and 2. Expected:
list 1 eventPhase = 1 (Charly down)
list 2 eventPhase = 2 (Charly up)
(actually should be 2 and 3 by W3, but it's ok, they decided to keep
first element on 0)

Results: eventPhase = 2 in both case (Charly up)

2 is at target.
There is indeed a bug in some Mozilla releases where eventPhase always
gives 2
<https://bugzilla.mozilla.org/show_bug.cgi?id=245569>
but this bug has been fixed in Mozilla trunk builds.
--

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

Jul 23 '05 #3

Duncan Booth

VK wrote:

The real killer is here: event object in FF is not exposed to inline
event capturers!
<ul onMouseOver="f1()" onMouseOut="f2()"> as well as
<ul onMouseOver="f1(e)" onMouseOut="f2(e)">
gives you undefined for e.

That's because it is called 'event'. Try:

<ul onmouseover="alert(this.onmouseover.toSource())">

to see what you actually get in your event handler when you put the code
inline.

Anyway, this should do what you want:

<ul onmouseover="f1(event)" onmouseout="f2(event)">

Jul 23 '05 #4

Lasse Reichstein Nielsen

"VK" <sc**********@yahoo.com> writes:

NN/FF implements a "Russian hills" style: mouse events go first
up->down (window->deepest element), and right away after that it goes
down->up (deepest element->window).
Correct. That is how the event handling model is defined in the W3C
DOM 2 Events specification, and Gecko implements it correctly.
In particular, it's specified here:
<URL:http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow>
On theory you can handle events during any phase on any level.
Correct, as long as event propagation isn't stopped before the event
hits that level.
On practice this implementation has some major flaws. I don't have
NN handy right now, but in FF we have:

SomeElement.addEventListener('mouseout', test, true)

This statement supposedly forces test() to capture events on the
up->down phase.
Correct. The third argument is also called "capture", and the up->down
phase is called the capture phase.
A simple test show that it fails to work. Both
addEventListener('mouseout', test, true) and
addEventListener('mouseout', test, false) capture only down->up phase
(bubbling).
No. It works fine. Try this:
---
<div id="bar"><div id="baz">XXXX</div></div>
<script type="text/javascript">
var bar = document.getElementById("bar");
bar.addEventListener("click", function(event) {
alert(["up", event.currentTarget.id, event.target.id]); }, false);
bar.addEventListener("click", function(event) {
alert(["down", event.currentTarget.id, event.target.id]); }, true);
var baz = document.getElementById("baz");
baz.addEventListener("click", function(event) {
alert(["hit", event.currentTarget.id, event.target.id]); }, false);
</script>
---
Then click on the "XXXX" :)
Eine Frage fuer Million Dollar: what the first phase for anyway?
The capture phase, not the bubbleing phase.
The real killer is here: event object in FF is not exposed to inline
event capturers!
<ul onMouseOver="f1()" onMouseOut="f2()"> as well as
<ul onMouseOver="f1(e)" onMouseOut="f2(e)">
That didn't work in IE either. In intrinsic event handlers, the event
is available as the variable "event". IE makes it a global variable,
other browsers make it local.
gives you undefined for e.
As it should. Nobody have declared any variable called "e".
Thus inline capturers are really good for nothing in FF, except maybe
for alert("Hello world!") stuff. I don't know where did they get
such idea, certainly not from my books and not from W3 papers.
There is no standard for how events are propagated to intrinsic event
handlers, but the "event" variable has been defacto standard since ...
Netscape 2, I think.
I also guess that the event object in this case is not exposed neither
to the user nor to the program core itself. This explains why inline
capturers randomly fail to work depending on the mouse movement
direction and even movement speed.
I have no idea what these failures are, but this is not the reason for
them.
This actually answers my question: is there a simple universal way to
handle events from inline capturers? The answer is: NO, because of FF
global failure.
Big words. Now eat them :)
For a situation like
<ul id="UL1">
<li><a href="javascript:void(0)">Item 1</a></li>
<li><a href="javascript:void(0)">Item 2</a></li>
<li><a href="javascript:void(0)">Item 3</a></li>
</ul>
the only way to properly handle mouse events from <ul> is to attach
event handlers on onload, and later study target properties to see if
this event really from <ul> or from some underlaying element.

<ul id="UL1" onclick="var tgt = event.target||event.srcElement;//IE sucks
if (tgt == this) { alert('event on UL!'); }">
....
Good luck
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

Jul 23 '05 #5

I'm using build 1.0.4 - this is the latest upon mozilla.org. The bug is
not fixed.

Jul 23 '05 #6

Martin Honnen

VK wrote:

I'm using build 1.0.4 - this is the latest upon mozilla.org. The bug is
not fixed.

I said "<https://bugzilla.mozilla.org/show_bug.cgi?id=245569>
this bug has been fixed in Mozilla trunk builds." so download a trunk
build and you will find that there the bug is fixed. 1.0.4 is the latest
release but not a trunk build. You can see in the bug entry on bugzilla
when it has been fixed.
--

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

Jul 23 '05 #7

event.target||event.srcElement*

Oh! Excellent!
Funny though: before my postings I went through the entire
<http://www.mozilla.org/docs/dom/domref/dom_event_ref.html#998197>
I found no mention that the global "event" object is also available in
FF, this is why I even did not try it. Strange they keep in deep secret
the only really working method. Is it only because this idea got first
contaminated by durty hands of Microsoft? :-)

Jul 23 '05 #8

Martin Honnen

VK wrote:

event.target||event.srcElement*

Oh! Excellent!
Funny though: before my postings I went through the entire
<http://www.mozilla.org/docs/dom/domref/dom_event_ref.html#998197>
I found no mention that the global "event" object is also available in
FF, this is why I even did not try it. Strange they keep in deep secret
the only really working method.

There is no global event object in Firefox. There is an event argument
however in inline event handlers. So
<div onclick="alert(event);">
works as the onclick handler has an argument named event that is passed
in the current event object.
That is quite different from the IE way of having a global event object.

--

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

Jul 23 '05 #9

Giving credits to the Mozilla team: their event tracking indeed works,
so "eventPhase is always 2" is a textual bug, not a mechanical one.

The test below shows that I really can capture events on the first
phase (up->down, capturing). This way there is no need to backtrace
bubbles on the second phase to find out the real target.
So there is no any "chaos" as I originally said. Just a bit too
over-complicated for intuitive use.

<html>
<head>
<title>FireFox test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script>
var out = null;
function init() {
out = document.forms[0].elements[0];

document.getElementById('UL1').addEventListener('m ouseout',test1,true);

document.getElementById('UL1').addEventListener('m ouseout',test2,false);
}

function test1(e) {
//e.stopPropagation();
out.value+= 'V ';
}
function test2(e) {
out.value+= '^ ';
}
</script>
<style type="text/css">

</style>
</head>
<body bgcolor="#FFFFFF" onload="init()">
<h4>Test Case</h4>
<ul id="UL1">
<li><a href="javascript:void(0)">Item 1</a></li>
<li><a href="javascript:void(0)">Item 2</a></li>
<li><a href="javascript:void(0)">Item 3</a></li>
</ul>
<form>
<textarea cols="50" rows="4"></textarea>
</form>
<p> </p>
</body>
</html>

Jul 23 '05 #10

by: rich_poppleton | last post by:

Help.... I've got a textarea where people type in a description. However for certain reasons we need to stop them typing !$*^ . I have a...

Javascript

layer transparent Please HELP!!

by: expertware | last post by:

Dear friends, My name is Pamela, I know little about CSS, but I would like to ask a question I have an image on a web page within a css layer: ...

HTML / CSS

FIREFOX 1.0.7 AND IE6 viewed through DATATIME: a summary REPORT

by: expertware | last post by:

Ok! to avoid confusion I will start a new argument. Thanks!! FIREFOX 1.0.7 AND IE6 viewed through DATATIME: a summary REPORT...

HTML / CSS

Script doesn't work in Firefox

by: niconedz | last post by:

Hi The following code works fine in IE but not Firefox. It's a little script that zooms an image and resizes the window to fit. Can anybody tell...

Javascript

firefox onmousemove and dragging issues

by: davefromalbury | last post by:

I'm trying to create a basic slider and I'm having absolutely no luck in firefox. Could someone please offer some hints as to what could be wrong?...

Javascript

Firefox error

by: kiran | last post by:

hi, i was working on some javascript part where i send a request to a php file which connects to database and then echoes back the result in xml...

Javascript

Firefox srcElement Issue

by: Jake G | last post by:

Ok. I have figured out my whole script except how to make it work in FF. It is a script that lets a user know how many characters they have left...

Javascript

table sorting doesnt work in firefox? but everywhere else

by: cluce | last post by:

i have a table sorting feature on my website that works everywhere else except in firefox. but the example code does work in firefox. this has me...

Javascript

The Top 5 Skills You Need in a PowerApps Developer

by: concettolabs | last post by:

In today's business world, businesses are increasingly turning to PowerApps to develop custom business applications. PowerApps is a powerful tool...

.NET Framework

Discuss your understanding of the Java platform.

by: better678 | last post by:

Question: Discuss your understanding of the Java platform. Is the statement "Java is interpreted" correct? Answer: Java is an object-oriented...

General

List of Topmost 8 Electronics Engineering Forum Websites

by: teenabhardwaj | last post by:

How would one discover a valid source for learning news, comfort, and help for engineering designs? Covering through piles of books takes a lot of...

General

How to minimize a tool bar that shows up when in reports

by: CD Tom | last post by:

This happens in runtime 2013 and 2016. When a report is run and then closed a toolbar shows up and the only way to get it to go away is to right...

General

Basic concepts of WebLogic Admin training?

by: Naresh1 | last post by:

What is WebLogic Admin Training? WebLogic Admin Training is a specialized program designed to equip individuals with the skills and knowledge...

Oracle Database

https redirect with reverse proxy

by: jalbright99669 | last post by:

Am having a bit of a time with URL Rewrite. I need to incorporate http to https redirect with a reverse proxy. I have the URL Rewrite rules made...

IIS / Internet Information Server

How to use http requests (Get function) to get variable value?

by: Matthew3360 | last post by:

Hi, I have a python app that i want to be able to get variables from a php page on my webserver. My python app is on my computer. How would I make it...

Python

How do I view Redshift db tables in Alteryx

by: Arjunsri | last post by:

I have a Redshift database that I need to use as an import data source. I have configured the DSN connection using the server, port, database, and...

General

by: WisdomUfot | last post by:

It's an interesting question you've got about how Gmail hides the HTTP referrer when a link in an email is clicked. While I don't have the specific...

General

FireFox event model failure

Similar topics