getBoundingClientRect在手機中爲空

我有一個具有角度功能的網站。我追蹤了一個bug到getBoundingClientRect方法。它的特性是在移動設備上的空（應用程序適用於筆記本電腦的罰款，等等....getBoundingClientRect在手機中爲空

此代碼：

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'：...}」對象，但不在該函數中）。

來源

2016-01-23 dylanthelion

無法使用設備仿真設置爲'iPad'在鉻 – guest271314

謝謝！我會嘗試獨立於完整應用程序的代碼。我的朋友和同事已經能夠重現Android和谷歌手機上的移動瀏覽器以及Kindle上的錯誤。我只能檢查我的設備上的警報，從本地主機運行。在那之前，不知道爲什麼那一小段代碼適合你。 :( – dylanthelion

是元素動態嗎？可以描述_「完整應用程序」_？，_「從本地主機運行」_？什麼是元素？ – guest271314

嘗試創建對象，添加屬性，從.getBoundingClientRect()值對象，然後創建的對象上調用JSON.stringify()

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

alert(JSON.stringify(obj))

來源

2016-01-23 21:36:43 guest271314

得到它！大部分朋友都知道這一點。移動設備不會註冊鼠標事件，只會觸摸事件，因此代碼實際上在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);

來源

2016-01-24 04:21:02 dylanthelion

@ mtackes因尋找原始問題而獲得信譽。 – dylanthelion

getBoundingClientRect在手機中爲空

回答

相關問題