移动端getBoundingClientRect为空

Question

我有一个具有角度功能的网站。我追踪到了getBoundingClientRect方法中的一个bug。它的属性在移动设备上是空的(该应用程序在笔记本电脑上运行良好，等等……

这段代码：

var message = JSON.stringify(element.getBoundingClientRect());
alert(message);

在我的MacBook上发送以下警报：

{“上”：164，“右”：601，“下”：468，“左”：328，“宽”：273，“高”：304}

在我的iPad上：

{}

为什么，有修复程序吗，或者我应该开始重写JS吗？

更多代码：

存储在var中的元素：

var element = document.querySelectorAll(selector)[0];

已添加事件：

element.addEventListener('touchmove', function(e) {
            getMouseCoordinates(e, element);
    });

事件：

function getMouseCoordinates(e, element) {
var x = e.clientX - element.getBoundingClientRect().left,
        y = e.clientY - element.getBoundingClientRect().top;
var message = JSON.stringify(element.getBoundingClientRect());
        alert(message);
    var  shiftX = x - mouseX; ** code was stopping here

我还进一步发现，在分配事件侦听器之前，ClientRect对象就具有属性(因此，同样的"var message =“代码会在移动浏览器中的事件侦听器处理程序之外发布一个完整的"{ 'top'：... }”对象，而不是在该函数中)。

Answer 1

尝试创建对象，将属性、值从.getBoundingClientRect()添加到对象，然后对创建的对象调用JSON.stringify()

var props =  element.getBoundingClientRect();
var obj = {};
for (var prop in props) {
  obj[prop] = props[prop]
};

alert(JSON.stringify(obj))

Answer 2

明白了!在很大程度上，我的一个朋友发现了这一点。移动设备不会注册鼠标事件，只会注册触摸事件，所以代码实际上会在var x= e.clientX - element.getBoundingClientRect().left行崩溃。触摸事件没有clientX属性；它们有成员具有clientX属性的TouchLists。为什么这会留下element.getBoundingClientRect()；一个空对象，我仍然不确定，但下面的代码按预期工作。如果检测到移动设备，则isMobile变量设置为true。

var touchEvent = (isMobile ? e.changedTouches[0] : e);
        console.log("Mobile: " + isMobile);
        console.log("Touch event: " + touchEvent);

var x = touchEvent.clientX - element.getBoundingClientRect().left,
        y = touchEvent.clientY - element.getBoundingClientRect().top;
        var message = JSON.stringify(element.getBoundingClientRect());
        alert("bounding rect: " + message);