Touch events on Android

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?

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: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


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>

    <div id="scrollingContainer">

        <div id="lotsOfContent">

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

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

            Scroll and drag here<br/>

        </div>

    </div>

    <div id="eventDisplay"></div>

    <script>

        $( "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: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


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: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


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: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


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: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


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: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Kutir Mobility
Bart, unfortunately we are

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

Visnupriya R

Kutir Mobility

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
Hello Visnupriya,Thank you

Hello Visnupriya,

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

Bart

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
Is there any information on a

Is there any information on a sollution already?

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


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: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Kutir Mobility
Hi Have you tried 's solution

Hi

Have you tried 's solution ?

Thank you.

Kutir Mobility

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


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: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Kutir Mobility
You made our day Bart.

You made our day Bart.

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Log in to post comments