正文 

当前位置： 首页 > 源码 >

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

     2023-03-31     162

关键词：

【中文标题】在谷歌浏览器中， getBoundingClientRect().x 未定义【英文标题】：In google chrome, getBoundingClientRect().x is undefined 【发布时间】：2014-11-27 11:24:16 【问题描述】：

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

然而，在 google chrome 中，我的调试行打印了这个：

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

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

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

来自规格：

getBoundingClientRect()

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

    令 list 为在调用此方法的同一元素上调用 getClientRects() 的结果。

    如果列表为空，则返回 DOMRect 对象，其 x、y、width 和 height 成员为零。

    否则，返回一个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;
;

【问题讨论】：

在 Firefox 中，有x。我告诉过它在 Firefox 中有效。是的，我在 firebug 中检查了它，而不是查看文档 - 这可能是问题所在。 @torazaburo specification says there is x property. 所以这是错误的？ developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/… 【参考方案1】：

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

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

因此，您只需将rect.x 和rect.y 更改为rect.left 和rect.top。

【讨论】：

谷歌浏览器 jQuery 动画在谷歌浏览器中滞后

】谷歌浏览器jQuery动画在谷歌浏览器中滞后【英文标题】：GoogleChromejQueryAnimationlaginGoogleChrome【发布时间】：2012-01-2107:48:05【问题描述】：我需要使用jQuery平滑地移动对象。我正在使用.animate()方法。我正在为它的position属性设置... 查看详情

在谷歌浏览器中播放 avi 视频

】在谷歌浏览器中播放avi视频【英文标题】：Playavivideosingooglechrome【发布时间】：2017-03-2207:32:17【问题描述】：如何在chrome中播放avi视频？我的代码是<center><videocontrols><sourcesrc="plaque.avi"type="video/avi"></source></v... 查看详情

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

】在谷歌浏览器中，getBoundingClientRect().x未定义【英文标题】：Ingooglechrome,getBoundingClientRect().xisundefined【发布时间】：2014-11-2711:24:16【问题描述】：我正在画布上执行绘图操作。在我看来，计算相对于画布左上角的光标位置的最... 查看详情

为啥同一网页在谷歌浏览器中另存为 PDF 时字体大小不同？

】为啥同一网页在谷歌浏览器中另存为PDF时字体大小不同？【英文标题】：WhythesamewebpagehavedifferentfontsizewhensaveasPDFinGoogleChrome?为什么同一网页在谷歌浏览器中另存为PDF时字体大小不同？【发布时间】：2020-09-0821:11:33【问题描述】... 查看详情

在谷歌浏览器开发人员中重播 HTTP POST

】在谷歌浏览器开发人员中重播HTTPPOST【英文标题】：ReplayHTTPPOSTingooglechromeDeveloper【发布时间】：2012-01-1204:58:18【问题描述】：我正在从firebug切换到GoogleChrome开发者工具。到目前为止我喜欢它，但我真正缺少的一个功能是重播ht... 查看详情

$('iframe').css('visibility','hidden') 在谷歌浏览器中不起作用

】$(\\\'iframe\\\').css(\\\'visibility\\\',\\\'hidden\\\')在谷歌浏览器中不起作用【英文标题】：$(\'iframe\').css(\'visibility\',\'hidden\')notworkinginGooglechrome$(\'iframe\').css(\'visibility\',\'hidden\')在谷歌浏览器中不起作用【发布时间】：2011-12-0411:11 查看详情

地理定位在谷歌浏览器中不起作用

】地理定位在谷歌浏览器中不起作用【英文标题】：Geolocationdoesnotworkingooglechrome【发布时间】：2016-06-1711:55:13【问题描述】：地理位置是谷歌。示例取自这里https://developers.google.com/maps/documentation/javascript/examples/map-geolocation?hl=ru。... 查看详情

如何在谷歌浏览器中禁用站点隔离？

】如何在谷歌浏览器中禁用站点隔离？【英文标题】：HowtodisableSiteIsolationinGoogleChrome?【发布时间】：2018-07-1307:57:42【问题描述】：Chrome67在Windows、Mac、Linux和Chrome操作系统上启用了SiteIsolation，这会增加10-13%的内存使用量，并给We... 查看详情

在谷歌浏览器中调试时如何终止脚本执行？

】在谷歌浏览器中调试时如何终止脚本执行？【英文标题】：HowtoterminatescriptexecutionwhendebugginginGoogleChrome?【发布时间】：2012-10-1912:58:15【问题描述】：在GoogleChrome调试器中单步执行JavaScript代码时，如果我不想继续，如何终止脚... 查看详情

Json 文件不显示在谷歌浏览器中

】Json文件不显示在谷歌浏览器中【英文标题】：Jsonfiledosen\'tshowupingooglechrome【发布时间】：2015-07-2215:02:29【问题描述】：我正在开发一个通过jQuery和Leaflet显示Json文件的页面。Flickr端工作正常，但是当我尝试$.getJSONo时，我在Chrom... 查看详情

如何在谷歌浏览器中一步删除所有断点？

】如何在谷歌浏览器中一步删除所有断点？【英文标题】：HowtoremoveallbreakpointsinonestepinGoogleChrome?【发布时间】：2011-06-2115:47:28【问题描述】：使用版本11。[更新]现在有一个featurerequest。[更新]featurerequest已关闭（2011年12月）！【... 查看详情

在谷歌浏览器中使黄色自动完成透明[重复]

】在谷歌浏览器中使黄色自动完成透明[重复]【英文标题】：MakeyellowautocompletetransparentinGoogleChrome[duplicate]【发布时间】：2015-03-2802:31:53【问题描述】：这是文本区域这是被点击的文本区域，里面有文字当谷歌浏览器的自动完成劫... 查看详情

在谷歌浏览器中禁用检查元素，右键单击和 F12

】在谷歌浏览器中禁用检查元素，右键单击和F12【英文标题】：Disablinginspectelement,rightclickandF12ingooglechrome【发布时间】：2014-01-0617:41:57【问题描述】：有没有办法在谷歌浏览器中禁用检查元素、右键单击和F12？【问题讨论】：参... 查看详情

在谷歌浏览器中隐藏视频的原生播放按钮

】在谷歌浏览器中隐藏视频的原生播放按钮【英文标题】：Hidenativeplaybuttonforvideoingooglechrome【发布时间】：2017-05-0418:59:53【问题描述】：我正在尝试隐藏视频中心的默认播放按钮。我有一个自定义播放按钮，但本机播放按钮显示... 查看详情

如何在谷歌浏览器中设置兼容性视图

...在谷歌商店或者网上搜索下载谷歌插件IETab,然后打开谷歌浏览器，点击右上角地址栏后面的三条设置按钮。2、在下拉列表中选择“设置”。3、选择“扩展程序”选项。4、将下载好的文件夹中的IETab插件直接拖入谷歌浏览器中。5... 查看详情

iscroll在谷歌浏览器中的问题

...还有很多其他功能。不过，在使用iScroll的时候，在谷歌浏览器中出现不支持的情况，即，做移动的时候，出现卡顿或是每次只下拉或上拉几像素的问题。所以，，应该将PointerEvent关闭。那么什么是PointerEvent？又该如何关闭呢？... 查看详情

iscroll在谷歌浏览器中bug

...app嵌套html页面时，导致列表页滑动不起来，并且在chorme浏览器中使用手机模式，也滑动不起来，在scroll插件的IScroll函数最后增加 document.addEventListener(‘touchmove‘,function(e){e.preventDe 查看详情

jquery animate bug，仅在谷歌浏览器中

】jqueryanimatebug，仅在谷歌浏览器中【英文标题】：jqueryanimatebug,onlyingooglechrome【发布时间】：2012-03-0619:22:48【问题描述】：显然我的代码在所有浏览器中都可以正常工作，包括googlecrome会出现问题。我正在使用jquery.animate函数来... 查看详情