13 Replies Latest reply on Aug 4, 2014 12:13 AM by Kutir Mobility

    Touch events on Android

    Daniel Noorduin

      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?

        • Re: Touch events on Android
          Kutir Mobility

          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

            • Re: Re: Touch events on Android
              Daniel Noorduin

              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.