How to implement swipe gestures for mobile devices

Question

I have an application made in AngularJS which has arrow key navigation to switch views   I want to implement this navigation using swipe for touch devices  I tried jGestures library but it doesn t go well with swipe  I have been recommended NOT to use jquery mobile   Is there any other way to implement swipe   EDIT  It does not detect swipe cleanly  I tested it on multiple devices  including iPad and it takes multiple swipes to do an action routing in my case

User · Answer

NOTE  Greatly inspired by EscapeNetscape s answer  I ve made an edit of his script using modern javascript in a comment  I made an answer of this due to user interest and a massive 4h jsfiddle net downtime  I chose not to edit the original answer since it would change everything        Here is a detectSwipe function  working pretty well  used on one of my websites   I d suggest you read it before you use it  Feel free to review it edit the answer    x000D   x000D     usage example x000D  detectSwipe  swipeme    el  dir    gt  alert  you swiped on element with id   el id  to   dir  direction    x000D   x000D     source code x000D   x000D     Tune deltaMin according to your needs  Near 0 it will almost x000D     always trigger  with a big value it can never trigger  x000D  function detectSwipe id  func  deltaMin   90    x000D    const swipe det     x000D      sX  0  x000D      sY  0  x000D      eX  0  x000D      eY  0 x000D      x000D       Directions enumeration x000D    const directions   Object freeze   x000D      UP   up   x000D      DOWN   down   x000D      RIGHT   right   x000D      LEFT   left  x000D       x000D    let direction   null x000D    const el   document getElementById id  x000D    el addEventListener  touchstart   function e    x000D      const t   e touches 0  x000D      swipe det sX   t screenX x000D      swipe det sY   t screenY x000D       false  x000D    el addEventListener  touchmove   function e    x000D         Prevent default will stop user from scrolling  use with care x000D         e preventDefault    x000D      const t   e touches 0  x000D      swipe det eX   t screenX x000D      swipe det eY   t screenY x000D       false  x000D    el addEventListener  touchend   function e    x000D      const deltaX   swipe det eX - swipe det sX x000D      const deltaY   swipe det eY - swipe det sY x000D         Min swipe distance  you could use absolute value rather x000D         than square  It just felt better for personnal use x000D      if  deltaX    2   deltaY    2  lt  deltaMin    2  return x000D         horizontal x000D      if  deltaY     0    Math abs deltaX   deltaY   gt  1  x000D        direction   deltaX  gt  0   directions RIGHT   directions LEFT x000D      else    vertical x000D        direction   deltaY  gt  0   directions UP   directions DOWN x000D   x000D      if  direction  amp  amp  typeof func      function   func el  direction  x000D   x000D      direction   null x000D       false  x000D    x000D   swipeme   x000D    width  100   x000D    height  100   x000D    background-color  orange  x000D    color  black  x000D    text-align  center  x000D    padding-top  20   x000D    padding-bottom  20   x000D    x000D   lt div id  swipeme  gt  x000D    swipe me x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I made this function for my needs   Feel free to use it  Works great on mobile devices   function detectswipe el func      swipe det   new Object      swipe det sX   0  swipe det sY   0  swipe det eX   0  swipe det eY   0    var min x   30     min x swipe for horizontal swipe   var max x   30     max x difference for vertical swipe   var min y   50     min y swipe for vertical swipe   var max y   60     max y difference for horizontal swipe   var direc         ele   document getElementById el     ele addEventListener  touchstart  function e       var t   e touches 0       swipe det sX   t screenX       swipe det sY   t screenY      false     ele addEventListener  touchmove  function e       e preventDefault        var t   e touches 0       swipe det eX   t screenX       swipe det eY   t screenY          false     ele addEventListener  touchend  function e         horizontal detection     if     swipe det eX - min x  gt  swipe det sX      swipe det eX   min x  lt  swipe det sX    amp  amp    swipe det eY  lt  swipe det sY   max y   amp  amp   swipe det sY  gt  swipe det eY - max y   amp  amp   swipe det eX  gt  0             if swipe det eX  gt  swipe det sX  direc    r         else direc    l               vertical detection     else if     swipe det eY - min y  gt  swipe det sY      swipe det eY   min y  lt  swipe det sY    amp  amp    swipe det eX  lt  swipe det sX   max x   amp  amp   swipe det sX  gt  swipe det eX - max x   amp  amp   swipe det eY  gt  0             if swipe det eY  gt  swipe det sY  direc    d         else direc    u              if  direc                if typeof func     function   func el direc             direc           swipe det sX   0  swipe det sY   0  swipe det eX   0  swipe det eY   0      false        function myfunction el d      alert  you swiped on element with id    el    to   d   direction        To use the function just use it like  detectswipe  an element id  myfunction    detectswipe  an other element id  my other function     If a swipe is detected the function  myfunction  is called with parameter element-id and  l r u d   left right up down    Example  http   jsfiddle net rvuayqeo 1      I  UlysseBN  made a new version of this script based on this one which use more modern JavaScript  it looks like it behaves better on some cases  If you think it should rather be an edit of this answer let me know  if you are the original author and you end up editing  I ll delete my answer

User · Answer

I like your solution and implemented it on my site - however  with some little improvements  Just wanted to share my code   function detectSwipe id  f        var detect             startX  0          startY  0          endX  0          endY  0          minX  30       min X swipe for horizontal swipe         maxX  30       max X difference for vertical swipe         minY  50       min Y swipe for vertial swipe         maxY  60       max Y difference for horizontal swipe                direction   null          element   document getElementById id        element addEventListener  touchstart   function  event            var touch   event touches 0           detect startX   touch screenX          detect startY   touch screenY               element addEventListener  touchmove   function  event            event preventDefault            var touch   event touches 0           detect endX   touch screenX          detect endY   touch screenY               element addEventListener  touchend   function  event            if                  Horizontal move               Math abs detect endX - detect startX   gt  detect minX                   amp  amp   Math abs detect endY - detect startY   lt  detect maxY                          direction    detect endX  gt  detect startX     right     left             else if                  Vertical move               Math abs detect endY - detect startY   gt  detect minY                   amp  amp   Math abs detect endX - detect startX   lt  detect maxX                          direction    detect endY  gt  detect startY     down     up                      if   direction     null   amp  amp   typeof f      function                  f element  direction                         Use it like   detectSwipe  an element id   myfunction     Or  detectSwipe  another element id   my other function     If a swipe is detected the function myfunction is called with parameter element-id and  left    right    up  oder  down

User · Answer

The simplest solution I ve found that doesn t require a plugin   document addEventListener  touchstart   handleTouchStart  false           document addEventListener  touchmove   handleTouchMove  false   var xDown   null                                                          var yDown   null     function handleTouchStart evt                                                 xDown   evt touches 0  clientX                                            yDown   evt touches 0  clientY                                             function handleTouchMove evt        if     xDown      yDown             return            var xUp   evt touches 0  clientX                                          var yUp   evt touches 0  clientY      var xDiff   xDown - xUp      var yDiff   yDown - yUp       if   Math abs  xDiff    gt  Math abs  yDiff        most significant           if   xDiff  gt  0                left swipe               else              right swipe                                           else           if   yDiff  gt  0                up swipe               else               down swipe                                                                                            reset values        xDown   null      yDown   null

User · Answer

Shameless plug I know  but you might want to consider a jQuery plugin that I wrote   https   github com benmajor jQuery-Mobile-Events  It does not require jQuery Mobile  only jQuery

User · Answer

Hammer time   I have used Hammer JS and it work with gesture  Read details from here  https   hammerjs github io   Good thing that it is much more light weight and fast then jQuery mobile  You can test it on their website as well

User · Answer

There is also an AngularJS module called angular-gestures which is based on hammer js  https   github com wzr1337 angular-gestures

User · Answer

I looked at several solutions but all failed with scroll and select text being the biggest confusion  Instead of scrolling right I was closing boxes and such   I just finished my implementation that does it all for me    https   github com webdevelopers-eu jquery-dna-gestures  It is MIT so do what you want - and yes  it is really simple - 800 bytes minified  You can check it out on my  under-development  site https   cyrex tech - swiperight on touch-devices should dismiss popup windows

User · Answer

Have you tried Hammerjs  It supports swipe gestures by using the velocity of the touch  http   eightmedia github com hammer js

[javascript] How to implement swipe gestures for mobile devices?

Examples related to javascript

Examples related to mobile

Examples related to touch

Examples related to swipe

Examples related to gestures