是否包括觸摸事件客戶端 X/Y 滾動？

Question

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

這違反了規范，因為它說 clientX/Y 應該返回坐標而不滾動。

• 我嘗試添加/刪除元視口標簽 - 沒有成功。
• 我在 iPhone 和 Fennec 每晚的 iOS 4.3 中對其進行了測試——兩者都通過滾動返回值。

我做錯了什么？

謝謝

Answer 1

你沒有做錯什么。 這是滾動頁面時發生的舊版本 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
    };
}

這個 function 必須為 event.touches 數組中的每個觸摸調用。

Answer 2

嘗試這個

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 指南提供了更多詳細信息