4umi.com/web/javascript/mouseposition

Position that mouse

Basic Javascript

The various browsers have different approaches to the determination of the mouse position on the screen. This script will output the position of the mouse, relative to the viewport, in the textarea below, together with the minimum and maximum values, based on the current size of the window and the amount the document has been scrolled down. The reported values will be accurate in both quirks and strict mode documents.

It is interesting to see the coordinates of the mouse exceed their maximum values when moving over a scrollbar in IE. In Mozilla for example, the scrollbar is seen as part of the canvas for which the innerWidth and -Height are reported, in IE the scrollbar is excluded from the area for which the size is determined, but included in the element that receives the mousemove events.

The output

Output

The script

function getwindow() {
 var d = document, v = window, w, h, l, t;
 if( typeof v.innerWidth==='number' ) {
  w = v.innerWidth;
  h = v.innerHeight;
  l = v.pageXOffset;
  t = v.pageYOffset;
 } else if( ( v = d.documentElement ) &&
   typeof v.clientWidth==='number' &&
   v.clientWidth !== 0 || ( v = d.body ) ) {
  w = v.clientWidth;
  h = v.clientHeight;
  l = v.scrollLeft;
  t = v.scrollTop;
 }
 return {w: w, h: h, l: l, t: t};
}

function getmouse( e ) {
  e = e || window.event || {};
  var moux, mouy, w = getwindow(),
   minx = w.l,
   miny = w.t,
   maxx = w.w + w.l,
   maxy = w.h + w.t;
  if( typeof e.pageX==='number' ) {
    moux = e.pageX;
    mouy = e.pageY;
  } else {
    moux = e.x + w.l;
    mouy = e.y + w.t;
  }
  document.forms.f.elements.t.value =
   'mouse x =\t' + moux + '\nmouse y =\t' + mouy + '\n' +
   'min. x  =\t' + minx + '\nmin. y  =\t' + miny + '\n' +
   'max. x  =\t' + maxx + '\nmax. y  =\t' + maxy;
}

if( window.captureEvents ) { window.captureEvents( Event.MOUSEMOVE ); }
window.onscroll = getmouse;
window.onresize = getmouse;
window.document.onmousemove = getmouse;