javascript - 在谷歌浏览器中，未定义getBoundingClientRect()。x

我正在 Canvas 上执行绘图操作。在我看来，计算光标相对于 Canvas 左上角的位置的最佳方法是使用.getBoundingClientRect():

HTMLCanvasElement.prototype.relativeCoords = function(event) {
  var x,y;
  //This is the current screen rectangle of canvas
  var rect = this.getBoundingClientRect();

  //Recalculate mouse offsets to relative offsets
  x = event.clientX - rect.x;
  y = event.clientY - rect.y;
  //Debug
  console.log("x(",x,") = event.clientX(",event.clientX,") - rect.x(",rect.x,")");
  //Return as array
  return [x,y];
}

我认为此代码没有错，并且可以在Firefox中运行。 Test it.

在谷歌浏览器，但是，我的调试行打印此:



我究竟做错了什么？这不符合规格吗？

编辑:似乎我的代码遵循W3C:

从规格:

getBoundingClientRect()



DOMRect

interface DOMRect : DOMRectReadOnly {
    inherit attribute unrestricted double x;
    inherit attribute unrestricted double y;
    inherit attribute unrestricted double width;
    inherit attribute unrestricted double height;
};

最佳答案

getBoundingClientRect()返回的对象在某些浏览器中可能具有x和y属性，但不是全部。它始终具有left，top，right和bottom属性。

当您想知道浏览器实际实现的是什么时，建议使用MDN docs而不是任何W3C规范。有关此功能的更多准确信息，请参见MDN docs for getBoundingClientRect()。

因此，您需要做的就是将rect.x和rect.y更改为rect.left和rect.top。

关于javascript - 在谷歌浏览器中，未定义getBoundingClientRect()。x，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27169534/