I’m trying to help out the MochiKit and Dojo projects by writing an event normalizer. I’m tired of writing or finding one-off functions to solve this problem, and want something that will return accurate cursor and element coordinates.

I built a test page to collect seven browsers’ interpretations of a set of event properties. The only event property I normalized was event.target, I left everything else alone. The proxy.* values are calculated based on some assumptions I had about how the browsers interpreted the target’s position (proxy.pos), the cursor position relative to the document (proxy.page), the cursor position relative to the target (proxy.targetOffset), and the cursor position relative to the target’s positioning context (proxy.contextOffset). I used Pixie (Mac) and ZoomPlusU (PC) to position the cursor on every test.

My code still needs some work.

Note that Firefox 1.5 (Gecko 2005-11-11) introduced an off-by-one bug to the event.layerX and event.layerY properties. It’s been fixed in the latest nightly builds.

Also note that IE’s clientX and clientY properties are off by two pixels. From MSDN: “In Microsoft Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.” The proxy.page.x/y and .targetOffset.x/y variables seem to be relatively consistent up until test point five, when I measure point (1,1) in the document's first absolutely positioned element.

A lot of libraries do something like:

event.layerX = event.layerX || event.offsetX

This is incorrect, layerX and offsetX are not equivalent.

Here is the test page. (Hold down the alt key and click on any part of the page to get a variable dump.) I did nine manual tests at different points in the document, starting from the top left corner of the document. I’ve included Pixie screenshots to show where I’m taking my sample.

There is still a lot of work to do, and I would really appreciate your feedback on what I’ve got so far. You can reach me at beau@hartshorne.ca.

One

Two

Three

Four

Five

Six

Seven

Eight

Nine