由于 layerX/layerY 在 webkit 中已被弃用，我们应该使用什么替代品？答案

【问题标题】：What substitute should we use for layerX/layerY since they are deprecated in webkit?由于 layerX/layerY 在 webkit 中已被弃用，我们应该使用什么替代品？
【发布时间】：2021-11-12 02:15:22
【问题描述】：

在 chrome canary 中，layerX 和 layerY 已被弃用，但我们应该改用什么呢？

我找到了 offsetX，但它不适用于 Firefox。因此，为了在 webkit 上获得 layerX 而没有警告，我已经做到了：

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

但这看起来很复杂！这真的是我们应该做的让 layerX 在所有浏览器中工作吗？

【问题讨论】：

标签： javascript

【解决方案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 指出用于制作这个的两个函数。

【讨论】：

对不起，但这似乎并不总是与 layerX 和 layerY 相同的值......看起来我们必须继续寻找解决方案......
只是为了完成答案，请注意var x = y = 0，因为您将y 声明为全局。

【解决方案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
}

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

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

【讨论】：

【解决方案4】：

我知道此时这已经相当老了，但这是我为 layerX 解决这个问题的方法。

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

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

【讨论】：

【解决方案5】：

提供的解决方案无法考虑根元素 scrollOffset。这是我执行此任务的代码：

[layerX, layerY] = [...(function*() {  
    for (var el = ev.target; 
         el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop); 
         el = el.offsetParent) yield el; 
    yield document.documentElement; })()
  ]
  .map(el => [ -el.offsetLeft + el.scrollLeft, -el.offsetTop + el.scrollTop ])
  .reduce( 
    (acc, coords) => [ acc[0] + coords[0], acc[1] + coords[1] ], 
    [ ev.clientX, ev.clientY] );

【讨论】：