Question

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

我找到了offsetX，但它不适用于Firefox。因此，为了在webkit上没有警告的情况下获取layerX，我已经这样做了：

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

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

Answer 1

这是一个从点击事件计算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属性的别名（我不允许通过堆栈溢出来发布任何其他链接，因为缺少“＆＃39;声誉”）。

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
}

然后你可以使用this计算出相对于元素的位置。

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

Answer 4

我知道这在这一点上已经很老了，但这是我如何为 layerX 解决这个问题的方法。

   function getLayerX(event) {
     return event.clientX - event.target.getBoundingClientRect().x
   }

我不确定这是否适用于所有用例，但这对我有用，所以我想使用 id share。

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

4 个答案: