Fix for lost Swipe Events on Android 4.4
I had a fight with appery/jquery mobile about page and swipe on android 4.4. SwipeLeft and SwipeRight where executed on every 4th or 5th try.
The issue is known for JQuery Mobile and most of the other frameworks as well. See https://github.com/jquery/jquery-mobi...
Root Cause is a change in WebView which requires a preventDefault on touchMove Events if the system should be able to identify a swipe. Unfortunately this collides vertical scroll events, so you can scroll a list.
After trying out several solutions like changing horizontalDistanceThreshold on $.event, using hammer.js, quojs and other Swipe Helpers and no success, I'm ended with this solution from https://developer.motorolasolutions.c...
I've added the suggested code from Gerbrand Stap on the "Device Ready" Event on my first Screen.
// Touchmove events are cancelled on Android KitKat when scrolling is possible on the touched element.
// Scrolling is always vertical in our app. Cancel the event when a touchmove is horizontal,
// so that all following touchmove events will be raised normally.
var startLoc = null;
$( "body" ).on( "touchstart", function( e ) {
if( e.originalEvent.touches.length == 1 ) { // one finger touch
// Remember start location.
var touch = e.originalEvent.touches[ 0 ];
startLoc = { x : touch.pageX, y : touch.pageY };
}
} );
$( "body" ).on( "touchmove", function( e ) {
// Only check first move after the touchstart.
if( startLoc ) {
var touch = e.originalEvent.touches[ 0 ];
// Check if the horizontal movement is bigger than the vertical movement.
if( Math.abs( startLoc.x - touch.pageX )
Math.abs( startLoc.y - touch.pageY ) ) {
// Prevent default, like scrolling.
e.preventDefault();
}
startLoc = null;
}
} );
I did not know, if this is the final solution, but at least my project now can ship with Swipe Scrolling between Pages.