包括触摸事件clientX / Y滚动或不？

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

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

• 我尝试添加/删除元视口标签 – 没有成功。
• 我每天晚上在iPhone和Fennec的iOS 4.3上进行testing，两者均通过滚动返回值。

我做错了什么？

谢谢

Answer 1

你没有做错什么。 这是在滚动页面时发生的旧版webkit中的一个错误。 我已经看到了iOS4中的这个错误，以及Android 4.0中的一个不同的错误。

我find了一种方法来检测错误并计算正确的值。 希望这对其他人有用：

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指南提供了更多的细节