javascript 包括触摸事件客户端X/Y 滚动与否？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5885808/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Includes Touch Events clientX/Y scrolling or not?
提问by kuvik
I'm trying to get touch coordinates relative to the viewportof browser from touch events (such as touchstart). I tried to get them from clientX/Y properties, but both actually return values including scrolling.
我正在尝试从触摸事件（例如touchstart）中获取相对于浏览器视口的触摸坐标。我试图从 clientX/Y 属性中获取它们，但实际上两者都返回了包括滚动在内的值。
This is against spec, as it says clientX/Y should return coordinates without scrolling.
这是违反规范的，因为它说 clientX/Y 应该在不滚动的情况下返回坐标。
- I tried adding/removing meta viewport tag - without success.
- I tested it in iOS 4.3 on iPhone and Fennec nightly - both return values with scrolling.
- 我尝试添加/删除元视口标签 - 没有成功。
- 我每晚在 iPhone 和 Fennec 上的 iOS 4.3 中对其进行了测试 - 两者都通过滚动返回值。
What I'm doing wrong?
我做错了什么？
Thanks
谢谢
回答by gregers
You're not doing anything wrong. It's a bug in older versions of webkit that occur when the page is scrolled. I have seen this bug in iOS4 and a different bug in Android 4.0.
你没有做错任何事。这是旧版本的 webkit 中滚动页面时发生的错误。我在 iOS4 中看到过这个错误，在 Android 4.0 中看到过一个不同的错误。
I've found a way to detect the bugs and calculate the correct values. Hope this can be useful for others:
我找到了一种检测错误并计算正确值的方法。希望这对其他人有用：
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
};
}
This function has to be called for each touch in the event.touches array.
必须为 event.touches 数组中的每个触摸调用此函数。
回答by Thomas Brasington
Try this
试试这个
event.touches[0].pageX
Note that it is always event.touches even if you define your event like this (using jquery here)
请注意，即使您像这样定义事件，它也始终是 event.touches（此处使用 jquery）
$("body").bind('touchmove', function(e){
//stops normal scrolling with touch
e.preventDefault();
console.log(event.touches[0].pageX)
})
;
;
The Safari guideprovides more detail
的Safari的导向提供更详细
