Question

我有一个具有角度功能的网站。我已经跟踪了一个到getBoundingClientRect方法的错误。它的属性在移动设备上是空的（该应用程序在笔记本电脑等上工作正常....

此代码：

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

在我的MacBook上发送以下提醒：

{ “顶部”：164， “右”：468， “左”：：328， “宽度”：273， “高度”：， “底部” 601 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

GOT IT！一位朋友在很大程度上想到了这一点。移动设备不会注册鼠标事件，只会触摸事件，因此代码实际上是在var x = e.clientX - element.getBoundingClientRect（）。左行。触摸事件没有clientX属性;他们有TouchLists，其成员具有clientX属性为什么这会留下element.getBoundingClientRect（）;一个空的对象，我仍然不确定，但以下代码按预期工作。如果检测到移动设备，则isMobile var设置为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);

移动设备中的getBoundingClientRect为空

2 个答案: