我们应该为layerX/layerY使用什么替代品,因为它们在webkit中已被弃用？

Question

在chrome canary中,不推荐使用layerX和layerY,但我们应该使用什么呢？

我找到了offsetX,但它不适用于Firefox.所以为了在webkit上没有警告的情况下获取layerX,我已经这样做了:

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

但这看起来相当复杂!这是否真的应该让layerX在所有浏览器中运行？

Answer 1

这是一个从click事件计算layerX和layerY的函数:

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指出用于制作这个功能的两个功能.

Answer 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属性的别名(我不允许通过堆栈溢出发布任何其他链接,因为缺少'声誉').

Answer 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
}

然后，您可以使用它来计算其相对于元素的位置。

我知道这很糟糕，但是互联网是一个可怕的地方。