Question

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

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

我尝试添加/删除元视口标记 - 但没有成功。
我在iOS上的iOS 4.3和Fennec上测试了它 - 都是滚动返回值。

我做错了什么？

由于

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数组中为每次触摸调用此函数。

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 guide提供了更多详细信息

是否包含Touch Events clientX / Y滚动？

2 个答案: