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

Question

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

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

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

我做错了什么？

谢谢

Answer 1

你没有做错任何事.这是滚动页面时旧版webkit中的错误.我在iOS4中看到过这个bug,在Android 4.0中看到了一个不同的bug.

我找到了一种方法来检测错误并计算正确的值.希望这对其他人有用:

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的导向提供更详细