Databases
StackOverflow2013
Postsdbo
POPreventing Additional Touches in Webapp
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPreventing Additional Touches in Webapp
    text
    copied!<p>I'm having a problem with the swipe code on my webapp. Using a single finger, the swiping between pages works flawlessly, however, when I touch with a second finger and move it at the same time as the first, the app becomes confused about which finger to listen to. This generally causes things to go very wrong. How can I go about ensuring that the only touch events the app respects are those triggered by the first finger touch? </p> <p>The code for my swipe plugin looks like this:</p> <pre><code>(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 &lt; 0 &amp;&amp; (Math.abs(vy) &gt; defaults.threshold.y)) direction.push('down'); else if (vy &gt; 0 &amp;&amp; (Math.abs(vy) &gt; defaults.threshold.y)) direction.push('up'); if (vx &lt; 0 &amp;&amp; (Math.abs(vx) &gt; defaults.threshold.x)) direction.push('right'); else if (vx &gt; 0 &amp;&amp; (Math.abs(vx) &gt; 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 &lt; 0 &amp;&amp; (Math.abs(velocity.y) &gt; defaults.threshold.y)) direction.push('down'); else if (velocity.y &gt; 0 &amp;&amp; (Math.abs(velocity.y) &gt; defaults.threshold.y)) direction.push('up'); if (velocity.x &lt; 0 &amp;&amp; (Math.abs(velocity.x) &gt; defaults.threshold.x)) direction.push('right'); else if (velocity.x &gt; 0 &amp;&amp; (Math.abs(velocity.x) &gt; 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); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload