Question

Working with the mouse within Javascript I have occasionally met the following event attributes:

• clientX, clientY
• layerX, layerY
• offsetX, offsetY
• pageX, pageY
• screenX, screenY
• x, y

I’m wondering what their cross-browser compatibility looks like in general, as I have only found bits and pieces of info that I’m trying to patch up together.

Answer 1

Here is how jQuery does it :

// Calculate pageX/Y if missing and clientX/Y available
if ( event.pageX == null && event.clientX != null ) {
  var doc = document.documentElement, body = document.body;
  event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
  event.pageY = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc   && doc.clientTop  || body && body.clientTop  || 0);
}

Testing pageX (or pageY) or calculating it from clientX and scrollLeft ans clientLeft