Closed
Bug 152202
Opened 23 years ago
Closed 22 years ago
apple.com - mouse events firing on #text nodes
Categories
(Tech Evangelism Graveyard :: English US, defect)
Tracking
(Not tracked)
RESOLVED
FIXED
People
(Reporter: wolf550e, Assigned: bc)
References
()
Details
(Whiteboard: [author])
Attachments
(1 file)
|
1.03 KB,
text/html
|
Details |
From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.1a)
Gecko/20020611
BuildID: 2002061104
In a JavaScript event handling function, if "element=event.target", then to
determine (or alter) the class property of said element "className" should be
used. It works on my M$IE6, and according to sites around the net (inc. w3.org)
is the standard. But, Mozilla says "element.className" is "undefined". I guess
it's Mozilla's fault.
Reproducible: Always
Steps to Reproduce:
1. Browse
to "http://developer.apple.com/internet/javascript/eventsexample1_source.html"
2. Copy the code from the page to a new .html file
3. Add DOCTYPE if you wish (it doesn't matter)
4. Open file (browse it) in Mozilla
5. Move mouse pointer over the words "active section"
6. Observe nothing changes.
7. Compare with M$IE
Actual Results: Nothing.
Expected Results: background should become yellow, due to span section's class
changing to "highlight"
1) This code uses document.all, which is a proprietary extension that only
works in MSIE. (You would see warnings to this effect in the JavaScript console
if you enable the preference "Show strict JavaScript warnings" on the "Debug"
preferences panel.) Presumably this is why things don't work. I don't get any
warning about "element.className" being undefined.
2) If you want to make text highlight when you hover your mouse over an area,
there is no need whatever to use JavaScript. Try this:
<HTML>
<HEAD>
<TITLE>Cross-Browser Events I</TITLE>
<STYLE TYPE="text/css">
BODY {background-color:white}
.normal {font-weight:normal; background-color:white}
.normal:hover {font-weight:bold; background-color:yellow}
</STYLE>
</HEAD>
<BODY onLoad="init()">
Roll the mouse to find the <SPAN ID="mySPAN" CLASS="normal">active section</SPAN>
of this sentence.
</BODY>
</HTML>
This works fine for me using Win 98 Build 2002061408.
If you want to find out how to use CSS pseudo-classes such as :hover and
:active, and selectors in general, please visit http://www.w3.org/TR/REC-CSS2/
Well, the "document.all" is definitely NOT the problem; it's just there to
enable IE4 support. Notice "document.getElementById" is there - it works. The
title does say "cross browser", after all. ;)
The code you provided (thanks) works in Mozilla, but guess what? It doesn't
work in MSIE6. I noticed a while ago that IE does not support combining two
definitions for a style section (".normal" with ":hover" or with an ID)
Problem is, I need the className specifically for a menu in a site I'm working
on (many folding menus use this technique).
According to this: http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-
20001113/html.html#ID-58190037 every element is supposed to have a 'className',
so I suggest an experiment:
<html>
<head>
<script language="JavaScript">
function mychange(e) {
var source = e.target;
alert(source.className);
}
document.onclick = mychange;
</script>
</head>
<body>
<div class="foo" id="myid1"><img src="open.gif" class="bar"></div>
<br>nothing <div class="baz" id="myid2">baz <span class="taz">taz</span>
baz</div> nothing
</body>
</html>
Can't run it in IE6 for some reason (a bug?), but in Opera6.03 – the class is
reported correctly in all cases (!).
In Mozilla, the gif is reported correctly but none of the text is. I say
Mozilla's DOM code doesn't handle something with text objects. I am not a
coder, nor am I an html expert, but I think it's a bug.
You said it worked for you on win98 – maybe it's NT dependent then. I'll try to
get a hold on some win9x machine to verify.
Summary: the className property of an event's target is "endefined" → the className property of an event's target is "undefined"
|
Assignee | |
Comment 3•23 years ago
|
||
The problem is that the event is firing on a #text node in Mozilla and they set
the className on the text node not the contain span element.
I say => Tech Evang: Authors
Please reasign if you disagree.
Component: DOM Core → Authors
Product: Browser → Tech Evangelism
Version: other → unspecified
|
|
Assignee | |
Updated•23 years ago
|
Status: UNCONFIRMED → NEW
Ever confirmed: true
|
|
Assignee | |
Comment 4•23 years ago
|
||
sorry for the spam, but I am having bugzilla problems tonight.
Assignee: jst → bclary
QA Contact: desale → mgalli
Summary: the className property of an event's target is "undefined" → apple.com - mouse events firing on #text nodes
[I am attaching the original problematic HTML.]
Ah, you're absolutely right. I figured out what's going on (but have no way to
tell if this is a bug or feature):
[In function toggleHighlight(evt)]
var elem = (evt.target) ? evt.target : evt.srcElement;
The type of this expression is "object Text".
[In function init]
var elem = document.getElementById("mySPAN");
The type of this expression is "object HTMLSpanElement". So it's not that the
HTMLElement.className is not supported in Mozilla (I have verified that it is);
it just is not a property of an object of type "object Text". Clearly, the
author of this script expects the target field of an event object to be the
HTML element object, but Mozilla makes it just some text instead. Until
someone figures out whether this is desired behavior or is actually a bug, I
suggest this workaround (or something like it):
<HTML>
<HEAD>
<TITLE>Cross-Browser Events I</TITLE>
<STYLE TYPE="text/css">
BODY {background-color:white}
.normal {font-weight:normal; background-color:white}
.highlight {font-weight:bold; background-color:yellow}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function toggleHighlight(evt, elem) {
evt = (evt) ? evt : ((window.event) ? window.event : "");
if (evt)
elem.className = (evt.type == "mouseover") ? "highlight" : "normal";
}
</SCRIPT>
</HEAD>
<BODY>
Roll the mouse to find the <SPAN ID="mySPAN"
onMouseOver="toggleHighlight(event, this); return true;"
onMouseOut="toggleHighlight(event, this); return true;" CLASS="normal">active
section</SPAN> of this sentence.
<HR>
</BODY>
</HTML>
Notice I have removed the init() function (and the reference to init() in
body's onLoad attribute); and I have pass elem as an arg into toggleHighlight
so that it need not need to be extracted from the event object (since Mozilla
doesn't seem to support that). This works in IE 6 and Mozilla (and probably NS
6/7), but not NS 4.x (and neither did the original version, afaict); I have no
idea about whether it works in Konqueror, Opera, etc.
Now that we've decomposed it, hopefully someone will figure out if it is
correct behavior for the event object's target field to return a text object.
I'll look for an existing bug, also.
By the way, I suggest you change this bug's summary (to something like,
"event.target is of type [object Text], expecting [object HTMLElement]"); and
since I attached the file, you could probably remove the example URL, or else
at least fix it so it is a valid URL (you have left out the http:// part of
it).
Can someone clarify something for me?
From "Document Object Model Events" section 1.4
(http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event)
"interface Event { [...]
readonly attribute EventTarget target;
[...] } [...]
Attributes
[...]
target of type EventTarget, readonly
Used to indicate the EventTarget to which the event was originally
dispatched."
I don't know if this reference is on topic, but it is my best guess as far as
which standard applies. But why is an object of type Text used when an object
of type EventTarget is called for? Do Text objects actually fulfill that
interface? Seems like it would be more useful if the target field contained a
reference to the actual target of an event, which could fulfill the EventTarget
interface itself, no? Thanks for the clarification.
|
|
Assignee | |
Comment 7•23 years ago
|
||
http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-EventTarget
<quote>
The EventTarget interface is implemented by all Nodes in an implementation which
supports the DOM Event Model.
</quote>
The real question is from
http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent
<quote>
In the case of nested elements mouse events are always targeted at the most
deeply nested element. Ancestors of the targeted element may use bubbling to
obtain notification of mouse events which occur within its descendent elements.
</quote>
EventTarget is an extension of a Node. But the Mouse Events narrative only
mentions Elements. There has been confusion on this point since no other browser
implements the DOM 2 Events and no other browser will fire a Mouse event on a
#text node.
|
||
Comment 8•22 years ago
|
||
Is this still a problem on apple.com now that bug 103055 and bug 185889 are fixed?
|
|
Assignee | |
Comment 9•22 years ago
|
||
tech evang june 2003 reorg
i think we can resolve this fixed.
Status: NEW → RESOLVED
Closed: 22 years ago
Component: Authors → English US
Resolution: --- → FIXED
Whiteboard: [author]
|
||
Updated•10 years ago
|
Product: Tech Evangelism → Tech Evangelism Graveyard
You need to log in
before you can comment on or make changes to this bug.
Description
•