我正在使用此代码使用触摸事件在平板电脑上的div内移动图像。我发现在iPad上进行测试时,图像可以在垂直,水平或两者上快乐地移动(如果你从对角线开始)。然而,我还发现,如果你开始垂直或水平移动图像,你就不能改变方向,直到你完成那个手势并开始另一个手势。
似乎一旦你开始在一个轴上移动,那么无论接触点的坐标是什么,它都优先于另一个轴。有没有办法覆盖这种行为,无论你如何开始向任何方向移动,或者只是Safari解释touchMove的方式?
如果有帮助,可以在之前的问题here中找到更详细的代码。
var clicking = false;
var previousX;
var previousY;
$("#scroll").touchStart(function(e) {
e.preventDefault();
previousX = e.clientX;
previousY = e.clientY;
clicking = true;
});
$(document).touchEnd(function() {
clicking = false;
});
$("#scroll").touchMove(function(e) {
if (clicking) {
e.preventDefault();
var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
$("#scroll").scrollLeft($("#scroll").scrollLeft() + (previousX - e.clientX));
$("#scroll").scrollTop($("#scroll").scrollTop() + (previousY - e.clientY));
previousX = e.clientX;
previousY = e.clientY;
}
});
$("#scroll").touchLeave(function(e) {
clicking = false;
});
编辑:刚刚检查过,它在Android平板电脑上运行正常,因此只是iPad造成了问题。