Javascript ontouchstart /移动/结束 - 得到奇怪的结果

我正在建设这个图片库与平板电脑/智能手机的刷卡功能。我在iPad上得到了非常奇怪的结果，所以我决定一直追溯到一开始，并在不同事件发生时打印出来。Javascript ontouchstart /移动/结束 - 得到奇怪的结果

下面的代码应该在我用手指完成滑动之后提醒类似于“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的结果看起来excpected大多数时间：

“start.move.move.move.move.end”

“start.end”（当只是轻点屏幕）

“ start.move.start.end“（发生其他所有触摸动作）

但是在iPad上，我收到了一些非常奇怪的结果。在第一次触摸动作时，我得到了我期待的内容，但在第二次触摸时，包含结果的警报（“start.move.move.move.end”）在触摸屏幕时立即触发，并且它始终包含以前的结果。当我第三次触摸屏幕时，它会再次回到正常操作状态，因此每隔一次触摸操作都会触发屏幕。

我环顾四周寻找有类似问题的人，但最近似乎是用户遇到多点触控操作问题（我不感兴趣）。有关为何发生这种情况的任何建议？

来源

2012-03-02 Anton Lundberg

不知道这是否是同样的事情，但我注意到，JavaScript的触摸事件有时会以错误的顺序进来。结束事件在移动事件之前就已经进入，也许这就是为什么得到这样的结果，但afaik不仅仅是iPad的情况，也是android的情况。 – jimpic 2012-05-15 06:34:22

你必须记住，触摸是一个多点触摸，它不像一个总是一个的鼠标事件。每次你触摸事件（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

在这里找到在touchend正确的触摸你不需要去通过这个列表，因为它永远只是一个但是您必须将该标识符与您保存在列表中的标识符进行比较。

希望这会有所帮助。

来源

2013-09-11 14:50:11

这个答案没有得到应有的感谢，因为它有多彻底。 – Zmart 2013-12-06 11:05:41

Javascript ontouchstart /移动/结束 - 得到奇怪的结果

回答

相关问题