我正在使用平板电脑/智能手机的滑动功能来构建此图片库.我在iPad上获得了非常奇怪的结果,所以我决定一直追溯到一开始,并在发生不同事件时打印出来.

在我用手指完成一次滑动之后,以下代码应该会发出警告：“ start.move.move.move.end”(“移动”的数量取决于滑动动作的持续时间).

        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.move.move.move.move.end”

“ start.end”(在轻拂屏幕时)

“ start.move.start.end”(每隔触摸一次就会发生一次)

但是在iPad上,我得到了一些非常奇怪的结果.在第一次触摸操作中,我得到的正是预期的结果,但是在第二次触摸操作中,包含结果的警报(“ start.move.move.move.end”)在触摸屏幕时立即触发,并且始终包含以前的结果.当我第三次触摸屏幕时,它又回到了正常操作状态,因此每执行一次其他触摸操作都会执行一次.

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

解决方法:

您必须记住,触摸是多点触摸,并不像总是一个鼠标事件.每次您获得触摸事件(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);

然后使用

event.changedTouches[0].identifier

在这里,您不需要浏览该列表,因为它始终只是一个,而您必须将该标识符与保存在列表中的标识符进行比较.

希望这会有所帮助.