JavaScript Examples Bible - UserWorks Technologies

416
JavaScript Examples Bible: The Essential Companion to JavaScript Bible
Finally, if you are a Windows user, here are two examples to try to see some of
the unexpected behavior of coordinate properties.
1. With the page not scrolled, click anywhere along the right side of the page,
away from any text so that the BODY element is srcElement. Because the
BODY element theoretically fills the entire content region of the browser window,
all coordinate pairs except for the screen coordinates should be the
same. But offset properties are two pixels less than all the others. By and
large, this difference won’t matter in your scripts, but you should be aware of
this potential discrepancy if precise positioning is important. For inexplicable
reasons, the offset properties are measured in a space that is inset two pixels
from the left and top of the window. This is not the case in the Macintosh version,
where all value pairs are the same from the BODY perspective.
2. Click the text of the H1 or P elements (just above and below the long horizontal
rule at the top of the page). In theory, the offset properties should be relative
to the rectangles occupied by these elements (they’re block elements,
after all). But instead, they’re measured in the same space as the client properties
(plus the two pixels). This unexpected behavior doesn’t have anything
to do with the cursor being a text cursor, because if you click inside any of the
text box elements, their offset properties are properly relative to their own
rectangles. This problem does not afflict the Macintosh version.
You can see further examples of important event coordinate properties in action
in the discussion of dragging elements around the IE page in Chapter 31 of the
JavaScript Bible.
fromElement
toElement
(IE) event.fromElement
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓ ✓ ✓
Example
Listing 29-15 provides an example of how the fromElement and toElement
properties can reveal the life of the cursor action before and after it rolls into an
element. When you roll the cursor to the center box (a table cell), its onMouseOver
event handler displays the text from the table cell from which the cursor arrived. In
Figure 13-1, for example, the user has just rolled the cursor into the center box from
the West box. If the cursor comes in from one of the corners (not easy to do), a different
message is displayed.