我有一个带有 javascript touchmove 事件侦听器的 div，它在 iOS6 Mobile Safari 上水平滚动 div 内的图像。我想让页面的垂直滚动冒泡到浏览器，但是当这种情况发生时，jQuery.animate 不再起作用。
我在 https://gist.github.com/4047733上发布了演示问题的代码的简化版本
我为重现问题而采取的步骤是：
- 向左/向右滑动图片并注意它是如何动画回到左边缘的
- 触摸图片并向上/向下滚动页面
- 重复左/右滑动并注意图片没有动画回到左边缘。在没有 e.preventDefault 的情况下发生 touchmove 后，jQuery 动画似乎失败了
这是从上面的 gist 链接准备好的 jQuery 文档中的 javascript
var el = document.getElementById("swipebox"),
$slider = $('#swipebox').find('img'),
startX, startY, dx, dy,
startLeft,
animateH = false,
animateV = false;
var onTouchStart = function(e) {
startLeft = parseInt($slider.css('left'), 10) || 0;
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
};
var onTouchMove = function(e) {
dx = e.touches[0].pageX - startX;
dy = e.touches[0].pageY - startY;
if (
animateH ||
(!animateV && Math.abs(dx) > 5)
) {
// prevent default, we are scrolling horizontally,
animateH = true;
$slider.stop().css({'left': startLeft+dx*2});
e.preventDefault();
} else if (Math.abs(dy) > 5) {
// do NOT prevent default, we are scrolling the page vertically
animateV = true;
} else {
// direction of scroll is undetermined at this time
// we've moved less than 5px in any direction
e.preventDefault();
}
return false;
};
var onTouchEnd = function(e) {
$slider.stop().animate({'left': 0}); // animate image back to left
e.preventDefault();
animateH = false;
animateV = false;
};
var onTouchCancel = function(e) {
console.log('onTouchCancel');
};
el.addEventListener('touchstart', onTouchStart, false);
el.addEventListener('touchmove', onTouchMove, false);
el.addEventListener('touchend', onTouchEnd, false);
el.addEventListener("touchcancel", onTouchCancel, false);
任何见解将不胜感激。