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

In google chrome, getBoundingClientRect().x is undefined

提问by Tomá? Zato - Reinstate Monica

I'm performing drawing operations on canvas. The best way to calculate cursor position relative to canvase top left corner is, in my opinion, usage of .getBoundingClientRect():

我正在画布上执行绘图操作。在我看来，计算光标相对于画布左上角的位置的最佳方法是使用.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];
}

I see nothing wrong with this code and it works in firefox. Test it.

我认为这段代码没有任何问题，它在 Firefox 中有效。测试一下。

In google chrome however, my debug line prints this:

然而，在谷歌浏览器中，我的调试行打印了这个：

x(NaN) = event.clientX(166) - rect.x(undefined)

x( NaN) = event.clientX( 166) - rect.x( undefined)

What am I doing wrong? Is this not according to the specifications?

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

Edit:seems my code follows W3C:

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

From the specs:

从规格：

getBoundingClientRect()

getBoundingClientRect()

The getBoundingClientRect()method, when invoked, must return the result of the following algorithm:

1. Let list be the result of invoking getClientRects()on the same element this method was invoked on.

2. If the list is empty return a DOMRectobject whose x, y, widthand heightmembers are zero.

3. Otherwise, return a DOMRectobject describing the smallest rectangle that includes the first rectangle in list and all of the remaining rectangles of which the height or width is not zero.

该getBoundingClientRect()方法在调用时必须返回以下算法的结果：

1. 让 list 成为调用getClientRects()此方法的同一元素的结果。

2. 如果该列表是空的回报DOMRect对象，其x，y，width和height成员都是零。

3. 否则，返回一个DOMRect描述最小矩形的对象，该最小矩形包括列表中的第一个矩形以及高度或宽度不为零的所有剩余矩形。

DOMRect

DOMRect

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

回答by Michael Geary

The object returned by getBoundingClientRect()may have xand yproperties in some browsers, but not all. It always has left, top, right, and bottomproperties.

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

I recommend using the MDN docsinstead of any W3C specs when you want to know what browsers actually implement. See the MDN docs for getBoundingClientRect()for more accurate information on this function.

当您想知道浏览器实际实现了什么时，我建议使用MDN 文档而不是任何 W3C 规范。有关此函数的更准确信息，请参阅getBoundingClientRect()的MDN 文档。

So all you need to do is change your rect.xand rect.yto rect.leftand rect.top.

因此，所有你需要做的是改变你rect.x和rect.y以rect.left和rect.top。

回答by JAGANPRABU.D BRAVE

You define like this.

你这样定义。

var rect.x = this.getBoundingClientRect().width;

var rect.y = this.getBoundingClientRect().height;