防止Web应用程序中的其他触动

我遇到了我的web应用程序上的滑动代码问题。使用单个手指，页面之间的滑动操作完美无瑕，但是，当我用第二根手指触摸并与第一个手指同时移动时，该应用程序会对要听哪个手指感到困惑。这通常会导致事情变得非常错误。我该如何确保应用程序尊重的唯一触摸事件是由第一手指触摸触发的触摸事件？防止Web应用程序中的其他触动

我的刷卡插件的代码看起来是这样的：

(function($) { 

     $.fn.movement = function(options) { 


    var defaults = { 
     threshold: { x: 150, y: 15 }, 
     mouseUp: function() {}, 
     mouseMove: function() { }, 
     mouseDown: function() { }, 
     scrollStart: function() { }, 
     scrollStop: function() { }, 
     scrollMove: function() { } 
    }; 



    var options = $.extend(defaults, options); 

    if (!this) return false; 


    //alert(this.attr("id")); 
    return this.each(function() { 

     var me = $(this) 

     // Private variables for each element 
     var originalCoord = { x: 0, y: 0 } 
     var lastCoord = {x: 0, y: 0 } 
     var finalCoord = { x: 0, y: 0 } 
     var velocity = { x: 0, y: 0 } 
     function touchMove(event) { 
       event.preventDefault(); 
       finalCoord.x = event.targetTouches[0].pageX // Updated X,Y coordinates 
       finalCoord.y = event.targetTouches[0].pageY 
       defaults.scrollMove(finalCoord); 
       defaults.mouseMove(finalCoord,activeDirection()); 
     } 

     function touchEnd(event) { 
      var direction = stoppedDirection(); 
      defaults.scrollStop(finalCoord); 
      defaults.mouseUp(velocity,direction);   
     } 

     function touchStart(event) { 
      originalCoord.x = event.targetTouches[0].pageX 
      originalCoord.y = event.targetTouches[0].pageY 
      lastCoord.x = originalCoord.x 
      lastCoord.y = originalCoord.y 
      finalCoord.x = originalCoord.x 
      finalCoord.y = originalCoord.y 
      defaults.scrollStart(originalCoord); 
     } 
     function activeDirection() { 
      var direction = []; 
      var vx = lastCoord.x - finalCoord.x; 
      var vy = lastCoord.y - finalCoord.y; 
      if (vy < 0 && (Math.abs(vy) > defaults.threshold.y)) 
       direction.push('down'); 
      else if (vy > 0 && (Math.abs(vy) > defaults.threshold.y)) 
       direction.push('up'); 
      if (vx < 0 && (Math.abs(vx) > defaults.threshold.x)) 
       direction.push('right'); 
      else if (vx > 0 && (Math.abs(vx) > defaults.threshold.x)) 
       direction.push('left'); 
      return direction; 
     } 

     function stoppedDirection() { 
      var direction = []; 
      velocity.x = originalCoord.x - finalCoord.x; 
      velocity.y = originalCoord.y - finalCoord.y; 
      if (velocity.y < 0 && (Math.abs(velocity.y) > defaults.threshold.y)) 
       direction.push('down'); 
      else if (velocity.y > 0 && (Math.abs(velocity.y) > defaults.threshold.y)) 
       direction.push('up'); 
      if (velocity.x < 0 && (Math.abs(velocity.x) > defaults.threshold.x)) 
       direction.push('right'); 
      else if (velocity.x > 0 && (Math.abs(velocity.x) > defaults.threshold.x)) 
       direction.push('left'); 
      return direction; 
     } 
     this.addEventListener("touchstart", touchStart, false); 
     this.addEventListener("touchmove", touchMove, false); 
     this.addEventListener("touchend", touchEnd, false); 
     this.addEventListener("touchcancel", touchCancel, false); 
     }); 
    }; 

})(jQuery);

来源

2012-04-10 Mulberry

因拥有触摸事件更好的控制，jQuery Mobile的可以是一个很好的选择。

http://jquerymobile.com/

来源

2012-04-10 06:13:07 undefined

欣赏回复。我更愿意在现有插件中修复这个问题，但如果目前的代码没有实际的解决方案，我们很高兴知道有替代方案。 – Mulberry 2012-04-10 07:43:35

每个手指触发自己的触摸事件。所以：

// put first finger down 
touchstart, 
// move that finger 
touchmove, touchmove, touchmove, ... 
// put second finger down 
touchstart, 
// move both fingers 
touchmove, touchmove, touchmove, ... 
// lift either finger 
touchend, 
// lift last finger 
touchend.

我想你开始明白如何跟踪第一根手指了。问题是：当两个手指在移动时，如何判断哪个手指是哪个touchmove？答案是Touch对象（用于获取pageX和pageY的对象）下的identifier属性。

所以当第一根手指向下时，记录它的identifier。对于即将发生的触摸事件，请遍历targetTouches（或只是changeTouches），并找到具有相同identifier的Touch对象。如果这样的Touch对象在changeTouches中不存在，我们什么也不做。我们不关心其他Touch对象。

最后，您需要考虑如何处理第一根手指。当第一根手指抬起而屏幕上还有其他手指时，第二根手指是否接管第一根手指的力量进行滚动？我们是否需要将所有手指从屏幕上抬起才能重置第一根手指的力量？随你便。

来源

2014-07-06 00:53:59

防止Web应用程序中的其他触动

回答

相关问题