Javascript ontouchstart/move/end - 得到奇怪的结果

Question

我正在为平板电脑/智能手机构建带有滑动功能的图片库。我在 iPad 上得到了非常奇怪的结果，所以我决定一直跟踪它回到开始，并在不同事件发生时打印出来。

以下代码本应在我用手指完成滑动后发出类似“start.move.move.move.end”的提示(“移动”的次数取决于滑动 Action 的时长) .

        itemWrap[0].ontouchstart = function(e) {
            _self.msg.push("start");

        }

        itemWrap[0].ontouchmove = function(e) {
            _self.msg.push("move");
        }

        itemWrap[0].ontouchend = function(e) {
            _self.msg.push("end");

            // join messages and alert to browser
            msg = _self.msg.join(".") || "empty";
            alert(msg);
        }

但是，我收到了非常奇怪的警报，它们在 Android/iOS 设备上有很大不同。在 Android 上，大多数情况下结果看起来都符合预期:

“开始.移动.移动.移动.移动.结束”

“start.end”(当只是轻弹屏幕时)

“start.move.start.end”(每隔一个触摸 Action 就会发生这种情况)

但在 iPad 上我得到了一些非常奇怪的结果。在第一次触摸操作时，我得到的正是我所期待的，但在第二次触摸时，包含结果(“start.move.move.move.end”)的警报会在触摸屏幕时立即触发，并且它始终包含之前的结果。当我第三次触摸屏幕时，它会再次恢复正常操作，其他所有触摸操作也是如此。

我四处寻找有类似问题的人，但我得到的最接近的似乎是遇到多点触控操作问题的用户(我对此不感兴趣)。关于为什么会发生这种情况有什么建议吗？

Answer 1

您必须记住触摸是多点触摸，它不像鼠标事件那样始终是一个。每次您获得触摸事件(touchstart、touchstart、touchend)时，您也会获得标识符

itemWrap[0].ontouchstart = function(e) {
    // e.touches.length - number of touches
    // e.touches[e.touches.length - 1].identifier - last touch is the last one on the list
    // e.touches[e.touches.length - 1].pageX and .pageY - place of the touch
    _self.msg.push("start");
}

因此，当您执行 touchmove 和 touchend 时，您必须检查该标识符以查看哪个触摸被移动或结束。您可以通过将数据保存在 touchstart 中来实现:

var t = {pageX:event.touches[index].pageX, pageY:event.touches[index].pageY, identifier:event.touches[index].identifier};
touches.push(t);

然后使用touchend找到正确的touch

event.changedTouches[0].identifier

在这里您不需要遍历该列表，因为它始终只有一个，但您必须将该标识符与您保存在列表中的标识符进行比较。

希望这会有所帮助。