javascript - 是否包括触摸事件客户端 X/Y 滚动？

Question

我正在尝试从触摸事件(例如touchstart)中获取相对于浏览器viewport 的触摸坐标。我试图从 clientX/Y 属性中获取它们，但实际上两者都返回值，包括滚动。

这是违反规范的，因为它说 clientX/Y 应该在不滚动的情况下返回坐标。

• 我尝试添加/删除元视口(viewport)标签 - 但没有成功。
• 我在 iPhone 和 Fennec nightly 上的 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
    };
}

必须为 event.touches 数组中的每个触摸调用此函数。