Developer Portal | Touch events on Android

Submitted by Daniel Noorduin on March 5, 2014 - 8:35am

Tags:

We have recently updgraded to Rhomobile 4 and are experiencing problems on Android devices (LG Nexus 4 mostly). Our application uses horizontal swipe gestures on pages that need to scroll vertically as well. It seems that right after the first touchmove event a touchcancel event follows immediately, even though the user is still touching the screen. Using 'preventDefault()' in touchmove handlers fixes this, but breaks vertical scrolling on the page. Does anyone know how to get both the scrolling and touch events to work?

May 4, 2019 - 8:23am

Kutir Mobility

Hi DanielCan you please share

Hi Daniel

Can you please share your framework details?

Like jquery version, jqm, custom css, js details?

Is it possible to share some code so that we can re-produce it locally ?

Thank you.

Visnupriya

Kutir Mobility

Vote:

May 4, 2019 - 8:23am

(Reply to #2) #2

Daniel Noorduin

We're using jquery version 1

We're using jquery version 1.9.0. The problem occurs on Android 4.4.2 on an LG Nexus 4 smartphone.

Below is some code that should reproduce the problem (placed in the body of a page):

<style>

#scrollingContainer {

height:300px;

overflow:scroll

}

#lotsOfContent {

height:1000px;

text-align:center;

background-color:#EEEEEE

}

#eventDisplay {

height:200px

}

</style>

Scroll and drag here<br/><br/><br/><br/>

Scroll and drag here<br/>

</div>

$( "body" ).bind( "touchstart touchmove touchcancel touchend", function( event ) {

//event.preventDefault();

var eventType = event.type.toLowerCase();

if( eventType == "touchstart" )

$( "#eventDisplay" ).text( eventType );

else

$( "#eventDisplay" ).text( $( "#eventDisplay" ).text() + " " + eventType );

} );

</script>

On my device this bit of code always displays "touchstart touchmove touchcancel" whenever I swipe accross the screen (the events fired). When "event.preventDefault()" is uncommented the proper events are fired/displayed, but the scrolling stops working.

Vote:

May 4, 2019 - 8:23am

(Reply to #3) #3

Kutir Mobility

Daniel,Are you using JQM?I

Daniel,

Are you using JQM?

I think that you need to specify width for #lotsOfContent div.

For example,

#lotsOfContent {
    height:1000px;
    width: 1280px;// if we add this, then both horizontal and vertical is working
    text-align:center;
    background-color:#EEEEEE;
}

Vote:

May 4, 2019 - 8:23am

(Reply to #4) #4

Daniel Noorduin

Thanks for your reply. We're

Thanks for your reply. We're not using JQuery mobile (and I didn't include a JQM script in this test).

Specifying a large width makes the content scroll horizontally, but doesn't solve my problem. It still fires the wrong touch events (a touchcancel even though I'm still touching the screen). We use a library called Hammer.js to recognize gestures. I don't think that's very relevant, since it relies on touch events which seem to be broken on my Android device unless 'preventDefault()' is used. As I mentioned before, calling 'preventDefault()' during a touch event will break the scrolling of the page.

Were you able to reproduce the touchcancel event while swiping the screen?

Vote:

October 3, 2013 - 6:58am

(Reply to #5) #5

Kutir Mobility

Daniel,Yes. I was able to

Daniel,

Yes. I was able to reproduce the bug on my device (device name). Yet to find a solution for this.

Visnupriya R

Kutir Mobility

Vote:

October 7, 2013 - 12:31am

(Reply to #6) #6

Bart Fukkink

Hello Visnupriya,Do you have

Hello Visnupriya,

Do you have any information about an sollution for this issue already? Sadly we have no information regarding this issue from our side.

Bart

Vote:

October 7, 2013 - 11:11am

(Reply to #7) #7

Kutir Mobility

Bart, unfortunately we are

Bart, unfortunately we are yet to find solution for this.

Visnupriya R

Kutir Mobility

Vote:

October 7, 2013 - 8:54am

(Reply to #8) #8

Bart Fukkink

Hello Visnupriya,Thank you

Hello Visnupriya,

Thank you for the response We will keep on waiting for a sollution

Bart

Vote:

May 4, 2019 - 8:25am

(Reply to #9) #9

Bart Fukkink

Is there any information on a

Is there any information on a sollution already?

Vote:

May 4, 2019 - 10:31am

(Reply to #10) #10

Gerbrand Stap

We eventually fixed the

We eventually fixed the problem by checking if the first touchmove represented horizontal movement. In that case the default behaviour is prevented. This was possible because scrolling is always vertical in our app and swipes are horizontal. The code we use is:

// 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;
  }
} );

Vote:

May 4, 2019 - 10:32am

(Reply to #11) #11

Kutir Mobility

Hi Have you tried 's solution

Have you tried 's solution ?

Thank you.

Kutir Mobility

Vote:

May 4, 2019 - 10:32am

(Reply to #12) #12

Bart Fukkink

Hello Kutir Mobility,Yes, I

Hello Kutir Mobility,

Yes, I have tried his sollution, since he sits about 3 desks away from me It is up to Daniel to mark this post as answered tho. Since he sits near me aswell i`ll poke him to do so

Cheers,

Bart

Vote:

May 4, 2019 - 10:32am

(Reply to #13) #13

Kutir Mobility

You made our day Bart.

Vote:

Search form

Touch events on Android