防止Webapp中的额外接触

我的webapp上的滑动代码有问题。 使用单个手指，页面之间的滑动可以完美地工作，但是，当我用第二个手指触摸并与第一个手指同时移动时，应用程序会对要听哪个手指感到困惑。 这通常会导致事情变得非常错误。 我如何确保应用程序所关注的唯一触摸事件是由第一次手指触摸触发的事件？

我的滑动插件的代码如下所示：

(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  defaults.threshold.y)) direction.push('down'); else if (vy > 0 && (Math.abs(vy) > defaults.threshold.y)) direction.push('up'); if (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  defaults.threshold.y)) direction.push('down'); else if (velocity.y > 0 && (Math.abs(velocity.y) > defaults.threshold.y)) direction.push('up'); if (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); 

Answer 1

为了更好地控制Touch事件，jQuery Mobile可能是一个不错的选择。

http://jquerymobile.com/

Answer 2

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

 // 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. 

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

因此，当第一个手指向下时，记录它的identifier 。 对于即将发生的触摸事件，迭代targetTouches （或只是changeTouches ）并找到具有相同identifier的Touch对象。 如果changeTouches中不存在此类Touch对象，则我们不执行任何操作。 我们不关心其他Touch对象。

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