Координаты мыши относительно документа

Размещена 3 сентабря, 2008 года

Поводите мышкой по коду функции ниже и смотрите при этом на строку состояния.

IE5+, Mozilla/Gecko, Opera 7+

function mousePageXY(e)
{
  var x = 0, y = 0;

  if (!e) e = window.event;

  if (e.pageX || e.pageY)
  {
    x = e.pageX;
    y = e.pageY;
  }
  else if (e.clientX || e.clientY)
  {
    x = e.clientX + 
      (document.documentElement.scrollLeft || document.body.scrollLeft) - 
      document.documentElement.clientLeft;
    y = e.clientY + 
      (document.documentElement.scrollTop || document.body.scrollTop) - 
      document.documentElement.clientTop;
  }

  return {"x":x, "y":y};
}

Функция возвращает объект со свойствами x, y, определяющими координаты курсора.

Пример использования:

document.onmousemove = function(e){
    var mCur = mousePageXY(e); 
    window.status = "X:"+mCur.x+" - Y:"+mCur.y;
};

Как узнать координаты мыши (положение курсора мыши) внутри абсолютно позиционированного элемента?

function mouseLayerXY(e)
{
  if (!e) {e = window.event; e.target = e.srcElement}
  var x = 0;
  var y = 0;
  
  if (e.layerX)//Gecko
  {
    x = e.layerX - 
      parseInt(getElementComputedStyle(e.target, "border-left-width"));
    y = e.layerY - 
      parseInt(getElementComputedStyle(e.target, "border-top-width"));
  }
  else if (e.offsetX)        //IE, Opera
  {
    x = e.offsetX;
    y = e.offsetY;
  }
  
  return {"x":x, "y":y};
}

// Функция для вычисления CSS свойст элементов
function getElementComputedStyle(elem, prop)
{
  if (typeof elem!="object") elem = document.getElementById(elem);
  
  // external stylesheet for Mozilla, Opera 7+ and Safari 1.3+
  if (document.defaultView && document.defaultView.getComputedStyle)
  {
    if (prop.match(/[A-Z]/)) {
        prop = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
    }
    return 
        document.defaultView.getComputedStyle(elem, "").getPropertyValue(prop);
  }
  
  // external stylesheet for Explorer and Opera 9
  if (elem.currentStyle)
  {
    var i;
    while ((i=prop.indexOf("-"))!=-1) {
        prop = prop.substr(0, i) + 
            prop.substr(i+1,1).toUpperCase() + 
            prop.substr(i+2);
    return elem.currentStyle[prop];
  }
  
  return "";
}