包括觸摸事件clientX/Y是否滾動？

我試圖從觸摸事件（例如touchstart）獲取觸摸座標相對於瀏覽器的視口。我試圖從clientX/Y屬性中獲取它們，但實際上它們都返回包括滾動的值。包括觸摸事件clientX/Y是否滾動？

這是違反規範，因爲它說客戶端X/Y應該返回座標而不滾動。

我試着添加/刪除元視口標籤 - 沒有成功。
我在iPhone和Fennec上每天在iOS 4.3上進行測試，兩者都通過滾動返回值。

我在做什麼錯了？

感謝

2011-05-04 kuvik

試試這個

event.touches[0].pageX

注意，它總是event.touches即使您定義的事件是這樣的（使用jquery這裏）

$("body").bind('touchmove', function(e){ 
//stops normal scrolling with touch 
e.preventDefault(); 

console.log(event.touches[0].pageX) 

})

;

的Safari guide提供更詳細

來源

2011-05-04 15:42:11

是的，我通過event.touches [0] .clientX檢索它...但我仍然不知道爲什麼（iOS至少）報告pageX和clientX相同（實際上它們應該因視口偏移而有所不同） – kuvik 2011-05-04 17:37:30

你是對的，看起來像一個錯誤。您可以通過抵消頁面滾動來解決這個問題'（event.targetTouches [0] .screenY - $（window）.scrollTop（））' – 2011-05-04 21:25:39

e.originalEvent.touches [0] .clientY正在爲我工作 – 2015-06-06 14:38:45

你沒有做錯什麼。這是在頁面滾動時發生的舊版webkit中的一個錯誤。我已經看到了iOS4中的這個錯誤，以及Android 4.0中的一個不同的錯誤。

我發現了一種檢測錯誤並計算正確值的方法。希望這對其他人有用：

function fixTouch (touch) { 
    var winPageX = window.pageXOffset, 
     winPageY = window.pageYOffset, 
     x = touch.clientX, 
     y = touch.clientY; 

    if (touch.pageY === 0 && Math.floor(y) > Math.floor(touch.pageY) || 
     touch.pageX === 0 && Math.floor(x) > Math.floor(touch.pageX)) { 
     // iOS4 clientX/clientY have the value that should have been 
     // in pageX/pageY. While pageX/page/ have the value 0 
     x = x - winPageX; 
     y = y - winPageY; 
    } else if (y < (touch.pageY - winPageY) || x < (touch.pageX - winPageX)) { 
     // Some Android browsers have totally bogus values for clientX/Y 
     // when scrolling/zooming a page. Detectable since clientX/clientY 
     // should never be smaller than pageX/pageY minus page scroll 
     x = touch.pageX - winPageX; 
     y = touch.pageY - winPageY; 
    } 

    return { 
     clientX: x, 
     clientY: y 
    }; 
}

必須爲event.touches數組中的每個觸摸調用此函數。

來源

2012-10-03 17:53:44 gregers

包括觸摸事件clientX/Y是否滾動？

回答

相關問題