我正在尝试从触摸事件(例如 touchstart )获取相对于浏览器的视口的触摸坐标。我试图从clientX / Y属性中获取它们,但两者实际上都返回值,包括滚动。
这是违反规范的,因为它说clientX / Y应该返回坐标而不滚动。
我做错了什么?
由于
答案 0 :(得分:15)
你没有做错任何事。这是滚动页面时旧版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数组中为每次触摸调用此函数。
答案 1 :(得分:8)
试试这个
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提供了更多详细信息