getBoundingClientRect 在移动设备中是空的

getBoundingClientRect is empty in mobile

本文关键字：移动 getBoundingClientRect      更新时间：2023-09-26

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

此代码：

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

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

{"顶部"：164，"右"：

601，"底部"：468，"左"：328，"宽度"：273，"高度"：304}

在我的 iPad 上：

{}

为什么，有修复程序，还是我应该开始重写 JS？

更多代码：

存储在变量中的元素：

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'： ... }"对象，但不在该函数中）。

知道了！一位朋友在很大程度上想通了这一点。移动设备不注册鼠标事件，只记录触摸事件，所以代码实际上是在var x = e.clientX - element.getBoundingClientRect（）.left行处爆炸的。触摸事件没有客户端 X 属性;他们有 TouchList，其成员具有 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()添加到对象 ，然后在创建的对象上调用JSON.stringify()

var props =  element.getBoundingClientRect();
var obj = {};
for (var prop in props) {
  obj[prop] = props[prop]
};
alert(JSON.stringify(obj))
相关文章：