Javascript getBoundingClientRect在mobile中为空

我有一个具有角度功能的网站。我跟踪到了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'：…}”对象，但不在该函数中）.

尝试创建对象，将

.getBoundingClientRect（）

中的属性和值添加到对象，然后对创建的对象调用

JSON.stringify（）

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

alert(JSON.stringify(obj))

---

明白了！一位朋友基本上明白了这一点。移动设备不注册鼠标事件，只注册触摸事件，因此代码实际上在var x=e.clientX-element.getBoundingClientRect（）处爆炸.left line.Touch事件没有clientX属性；它们有TouchList，其成员具有clientX属性。为什么会保留元素。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);

---

无法在ChromiumHanks上使用设置为

iPad

的设备模拟进行复制！如果可以，我将尝试独立于完整应用程序的代码。我的朋友和同事已经能够在Android和Google手机以及Kindle上的移动浏览器中复制该漏洞。我只能在本地主机上检查设备上的警报。在此之前，我不知道为什么这段代码对您有效。：（元素是动态的吗？可以描述“完整应用程序”？，“从本地主机运行”什么是

元素

？元素是动态的。它是一个html画布，带有一张照片。有一个覆盖的裁剪UI，裁剪窗口在移动设备上不起作用。我跟踪到一行代码，该代码在getBoundingClientRect（）上执行数学运算.left，该值为null。Rect对象不为null。完整的应用程序是一个网站。我是团队的新成员，不确定是否应该将网站发布到此处，直到发布完成。从localhost运行：我克隆了存储库，并从我计算机上的节点服务器运行克隆。URL为：port，在我的iPad上，在iOSSimulatorHaha中。抱歉。另外，我信任的一位朋友说，移动设备不会注册某些鼠标事件。我将与touch事件和他的建议一起玩，看看我是否能让裁剪器工作，并完全接受评分。：P除非有人问。@mtackes因发现原始问题而获得评分。