0

基本上，我试图确定用户使用 javascript 在 iOS 设备上滑动手指的方向。

我知道我可以通过使用以下方法找出手指的位置：

e.originalEvent.touches[0].pageX;

所以我的想法是

  1. 存储第一个移动位置的位置，比如130

  2. 确定下一个位置的位置，比如说129

  3. 如果当前位置大于，则向右移动。小于，向左移动

唯一的问题是它会在这样的事件中运行：

$(".container").on("touchmove", function (e) {
    e.preventDefault();
});

所以我不确定存储上一个位置的最佳方法，然后是下一个位置，并检查它们是否大于或小于。

我最初的想法是使用这样的东西：

$(".container").on("touchstart", function (e) {
    e.preventDefault();
    original = e.originalEvent.touches[0].pageX;
});

$(".container").on("touchmove", function (e) {
    e.preventDefault();
    direction = e.originalEvent.touches[0].pageX;
    if (direction > original) {
        console.log("right");
    } else {
        console.log("left");
    }
});

但这只会确定滑动是在原点的左侧还是右侧，而不是前一个手指位置的左侧或右侧。

4

1 回答 1

1

看起来您快到了 - 您应该能够通过更新每次调用事件时要比较的点来获得所需的行为，如下所示：

$(".container").on("touchstart", function (e) {
    e.preventDefault();
    lastPosition = e.originalEvent.touches[0].pageX;
});

$(".container").on("touchmove", function (e) {
    e.preventDefault();
    currentPosition = e.originalEvent.touches[0].pageX;
    if (currentPosition > lastPosition) {
        console.log("right");
    } else {
        console.log("left");
    }
    lastPosition = currentPosition;
});

也就是说，根据平台和您想要实现的目标，您可能会发现简单地将当前位置与之前的位置进行比较会产生过于“嘈杂”的结果（即，因为用户的手指不只触摸一个像素，当用户缓慢向右移动手指时，您可能会看到“right”、“right”、“left”、“right”、“right”、“left”、“right”等输出）。如果发生这种情况，您可能需要记录前 5 个位置并进行比较，如下所示：

var positions = [];
$(".container").on("touchstart", function (e) {
    e.preventDefault();
    positions.push(e.originalEvent.touches[0].pageX);
});

$(".container").on("touchmove", function (e) {
    e.preventDefault();
    positions.push(e.originalEvent.touches[0].pageX);

    var direction = 0;
    var i;
    for (i = 0; i < positions.length - 1; i++) {
        if (positions[i + 1] > positions[i]) {
            direction++;
        } else {
            direction--;
        }
    }

    if (direction > 0) {
        console.log("right");
    }
    else {
        console.log("left");
    }

    if (positions.length > 5) {
        positions.shift();
    }
});
于 2013-07-03T01:35:47.363 回答