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

Question

我在画布上进行绘图操作.在我看来,相对于画布左上角计算光标位置的最佳方法是使用.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中运行.测试一下.

但是在谷歌浏览器中,我的调试行打印出来:

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

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

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

从规格:

getBoundingClientRect()

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

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

2. 如果列表为空,则返回一个DOMRect对象x,其中y,width和height成员为零.

3. 否则,返回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;
};

Answer 1

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

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

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