Какой заменитель следует использовать для layerX/layerY, поскольку они устарели в webkit?

В chrome canary, layerX и layerY устарели, но что мы должны использовать вместо этого?

Я нашел offsetX, но он не работает с Firefox. Поэтому, чтобы получить layerX без предупреждения в webkit, я сделал это:

var x = evt.offsetX || evt.layerX,
    y = evt.offsetY || evt.layerY;

Но это кажется довольно сложным! Это действительно то, что мы должны сделать, чтобы заставить layerX работать во всех браузерах?

Ответы

Ответ 1

Вот функция для вычисления layerX и layerY из события click:

function getOffset(evt) {
  var el = evt.target,
      x = 0,
      y = 0;

  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    x += el.offsetLeft - el.scrollLeft;
    y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }

  x = evt.clientX - x;
  y = evt.clientY - y;

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

Большое спасибо Stu Cox за указание двух функций, используемых для создания этого.

Ответ 2

Вы уверены, что layerX и layerY устарели?

По моему опыту они все еще существуют, главным образом потому, что связанные свойства offsetX и offsetY не реализованы в других браузерах:

В webkit и mozilla много обсуждений:

https://bugs.webkit.org/show_bug.cgi?id=21868 и https://bugzilla.mozilla.org/show_bug.cgi?id=674292 В двух словах, они оба немного неубедительны, удалять или нет, поэтому пока они не удалили его.

более поздние версии IE предоставляют псевдоним, который сопоставляет свойствам x и y (мне не разрешено размещать какие-либо дополнительные ссылки путем из-за отсутствия "репутации" ).

Ответ 3

Единственными разумными кросс-браузерными способами определения положения мыши являются clientX/clientY (относительно окна), screenX/screenY (относительно всего экрана) и pageX/pageY (относительно документа, но не поддерживается в IE8 и ниже).

Quirksmode предлагает это для стандартизации относительно значения документа:

function doSomething(e) {
    var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY)     {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY)     {
        posx = e.clientX + document.body.scrollLeft
            + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop
            + document.documentElement.scrollTop;
    }
    // posx and posy contain the mouse position relative to the document
    // Do something with this information
}

Затем вы можете использовать это, чтобы определить его положение относительно вашего элемента.

Ужасно, я знаю, но интернет ужасное место.