Jquery Mobile swipe events in Android 4.2.2 not working

Question

I have written a mobile web application that uses the JQuery mobile swipeleft and swiperight events but these are not working on a Samsung Galaxy S4 running Android 4.2.2. Running the web application in either the standard web browser or in Chrome has the same issue: the swipe events are not detected.

The following is how I am trying to detect the events which works fine in other devices I have tested it on, even Android devices (but not Android 4.2.2):

$('#showImage').on("swipeleft", function (event) {
if (currentScale != initialScale) return;
if (currentPage < maxPage) {
  ++currentPage;
  img.src = document.getElementById("page" + zeroPad(currentPage, 2) + "url").value;
}
});

$('#showImage').on("swiperight", function (event) {
if (currentScale != initialScale) return;
if (currentPage > 1) {
  --currentPage;
  img.src = document.getElementById("page" + zeroPad(currentPage, 2) + "url").value;
}
});

Is there anything I can do, code-wise, to capture these events in Android 4.2.2?

Answer 1

You are having two problems here.

First is caused by a bug in JQM that has been resolved but is not yet implemented https://github.com/jquery/jquery-mobile/issues/5534

Basically the min distance measured by the swipe event must take into account the pixel density of the device. So in JQM's case, the following change to touch.js will solve the issue:

horizontalDistanceThreshold = window.devicePixelRatio >= 2 ? 15 : 30;
verticalDistanceThreshold = window.devicePixelRatio >= 2 ? 15 : 30;

The second is todo with kitkat firing a touchcancel instead of a touchend. The solution is to delegate touchcancel to touchend.