Question

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

我知道我可以通过使用来弄清楚手指的位置：

e.originalEvent.touches[0].pageX;

所以我的想法是

存储第一个移动位置的位置，例如130
确定下一个位置的位置，例如129
如果当前位置大于，则向右移动。小于，向左移动

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

$(".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");
    }
});

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

Answer 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;
});

那就是说，根据平台和你想要实现的目标，你可能会发现简单地将当前位置与之前的位置进行比较会产生过于“嘈杂”的结果（即因为用户的手指没有接触到一个像素，您可能会看到输出，如“右”，“右”，“左”，“右”，“右”，“左”，“右”，......，当用户正在慢慢地向右移动他们的手指时。如果发生这种情况，您可能需要做一些事情，比如记录前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();
    }
});

确定变量是增加还是减少？

1 个答案: