Detect a finger swipe through JavaScript on the iPhone and Android

Question

How can you detect that a user swiped his finger in some direction over a web page with JavaScript   I was wondering if there was one solution that would work for websites on both the iPhone and an Android phone

User · Answer

If anyone is trying to use jQuery Mobile on Android and has problems with JQM swipe detection

(I had some on Xperia Z1, Galaxy S3, Nexus 4 and some Wiko phones too) this can be useful :

 //Fix swipe gesture on android
    if(android){ //Your own device detection here
        $.event.special.swipe.verticalDistanceThreshold = 500
        $.event.special.swipe.horizontalDistanceThreshold = 10
    }

Swipe on android wasn't detected unless it was a very long, precise and fast swipe.

With these two lines it works correctly

User · Answer

jQuery Mobile also includes swipe support  http   api jquerymobile com swipe   Example      divId   on  swipe   function event        alert  It s a swipe

User · Answer

Simple vanilla JS code sample   document addEventListener  touchstart   handleTouchStart  false           document addEventListener  touchmove   handleTouchMove  false    var xDown   null                                                          var yDown   null   function getTouches evt      return evt touches                   browser API          evt originalEvent touches     jQuery                                                         function handleTouchStart evt        const firstTouch   getTouches evt  0                                             xDown   firstTouch clientX                                            yDown   firstTouch 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                                                    Tested in Android

User · Answer

I have found  givanse brilliant answer to be the most reliable and compatible across multiple mobile browsers for registering swipe actions   However  there s a change in his code required to make it work in modern day mobile browsers that are using jQuery    event toucheswon t exist if jQuery is used and results in undefined and should be replaced by event originalEvent touches  Without jQuery  event touches should work fine   So the solution becomes   document addEventListener  touchstart   handleTouchStart  false           document addEventListener  touchmove   handleTouchMove  false    var xDown   null                                                          var yDown   null                                                           function handleTouchStart evt                                                 xDown   evt originalEvent touches 0  clientX                                            yDown   evt originalEvent touches 0  clientY                                                                                            function handleTouchMove evt        if     xDown      yDown             return             var xUp   evt originalEvent touches 0  clientX                                          var yUp   evt originalEvent 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                                                    Tested on     Android  Chrome  UC Browser iOS  Safari  Chrome  UC Browser

User · Answer

I ve repackaged TouchWipe as a short jquery plugin  detectSwipe

User · Answer

threshold  timeout swipe  swipeBlockElems add  document addEventListener  touchstart   handleTouchStart  false   document addEventListener  touchmove   handleTouchMove  false   document addEventListener  touchend   handleTouchEnd  false         const SWIPE BLOCK ELEMS        swipBlock      handle      drag-ruble     let xDown   null  let yDown   null   let xDiff   null  let yDiff   null  let timeDown   null  const  TIME THRESHOLD   200  const  DIFF THRESHOLD   130   function handleTouchEnd      let timeDiff   Date now   - timeDown   if  Math abs xDiff   gt  Math abs yDiff       most significant     if  Math abs xDiff   gt  DIFF THRESHOLD  amp  amp  timeDiff  lt  TIME THRESHOLD        if  xDiff  gt  0             console log xDiff  TIME THRESHOLD  DIFF THRESHOLD        SWIPE LEFT LEFT     left swipe          else            console log xDiff        SWIPE RIGHT RIGHT     right swipe              else       console log  swipeX trashhold         else     if  Math abs yDiff   gt  DIFF THRESHOLD  amp  amp  timeDiff  lt  TIME THRESHOLD        if  yDiff  gt  0             up swipe          else            down swipe              else       console log  swipeY trashhold              reset values     xDown   null   yDown   null   timeDown   null     function containsClassName  evntarget   classArr     for  var i   classArr length - 1  i  gt   0  i--       if  evntarget classList contains classArr i             return true              function handleTouchStart evt      let touchStartTarget   evt target    if  containsClassName touchStartTarget  SWIPE BLOCK ELEMS          return        timeDown   Date now     xDown   evt touches 0  clientX    yDown   evt touches 0  clientY    xDiff   0    yDiff   0      function handleTouchMove evt      if   xDown     yDown        return         var xUp   evt touches 0  clientX    var yUp   evt touches 0  clientY      xDiff   xDown - xUp    yDiff   yDown - yUp

User · Answer

You might have an easier time first implementing it with mouse events to prototype   There are many answers here  including the top  should be used with caution as they do not consider edge cases especially around bounding boxes   See    Touch Events Mouse Events   You will need to experiment to catch edge cases and behaviours such as the pointer moving outside of the element before ending   A swipe is a very basic gesture which is a higher level of interface pointer interaction processing roughly sitting between processing raw events and handwriting recognition   There s no single exact method for detecting a swipe or a fling though virtually all generally follow a basic principle of detecting a motion across an element with a threshold of distance and speed or velocity  You might simply say that if there is a movement across 65  of the screen size in a given direction within a given time then it is a swipe  Exactly where you draw the line and how you calculate it is up to you   Some might also look at it from the perspective of momentum in a direction and how far off the screen it has been pushed when the element is released  This is clearer with sticky swipes where the element can be dragged and then on release will either bounce back or fly off the screen as if the elastic broke   It s probably ideal to try to find a gesture library that you can either port or reuse that s commonly used for consistency  Many of the examples here are excessively simplistic  registering a swipe as the slightest touch in any direction   Android would be the obvious choice though has the opposite problem  it s overly complex   Many people appear to have misinterpreted the question as any movement in a direction  A swipe is a broad and relatively brief motion overwhelmingly in a single direction  though may be arced and have certain acceleration properties   A fling is similar though intends to casually propel an item away a fair distance under its own momentum   The two are sufficiently similar that some libraries might only provide fling or swipe  which can be used interchangeably  On a flat screen it s difficult to truly separate the two gestures and generally speaking people are doing both  swiping the physical screen but flinging the UI element displayed on the screen    You best option is to not do it yourself  There are already a large number of JavaScript libraries for detecting simple gestures

User · Answer

what i ve used before is you have to detect the mousedown event  record its x y location  whichever is relevant  then detect the mouseup event  and subtract the two values

User · Answer

I merged a few of the answers here into a script that uses CustomEvent to fire swiped events in the DOM  Add the 0 7k swiped-events min js script to your page and listen for swiped events  swiped document addEventListener  swiped   function e        console log e target      the element that was swiped     console log e detail dir      swiped direction      swiped-left document addEventListener  swiped-left   function e        console log e target      the element that was swiped      swiped-right document addEventListener  swiped-right   function e        console log e target      the element that was swiped      swiped-up document addEventListener  swiped-up   function e        console log e target      the element that was swiped      swiped-down document addEventListener  swiped-down   function e        console log e target      the element that was swiped      You can also attach directly to an element  document getElementById  myBox   addEventListener  swiped-down   function e        console log e target      the element that was swiped      Optional config You can specify the following attributes to tweak how swipe interaction functions in your page  these are optional    lt div data-swipe-threshold  quot 10 quot       data-swipe-timeout  quot 1000 quot       data-swipe-ignore  quot false quot  gt        Swiper  get swiping   lt  div gt   To set defaults application wide  set config attributes on topmost element   lt body data-swipe-threshold  quot 100 quot  data-swipe-timeout  quot 250 quot  gt       lt div gt Swipe me lt  div gt       lt div gt or me lt  div gt   lt  body gt   Source code is available on Github

User · Answer

I have merged a few of the answers too  mostly the first one and the second with classes  and here is my version    export default class Swipe       constructor options            this xDown   null          this yDown   null           this options   options           this handleTouchStart   this handleTouchStart bind this           this handleTouchMove   this handleTouchMove bind this            document addEventListener  touchstart   this handleTouchStart  false           document addEventListener  touchmove   this handleTouchMove  false               onLeft             this options onLeft               onRight             this options onRight               onUp             this options onUp               onDown             this options onDown               static getTouches evt            return evt touches         browser API             handleTouchStart evt            const firstTouch   Swipe getTouches evt  0           this xDown   firstTouch clientX          this yDown   firstTouch clientY             handleTouchMove evt            if     this xDown      this yDown                 return                     let xUp   evt touches 0  clientX          let yUp   evt touches 0  clientY           let xDiff   this xDown - xUp          let yDiff   this yDown - yUp            if   Math abs  xDiff    gt  Math abs  yDiff        most significant               if   xDiff  gt  0  amp  amp  this options onLeft                       left swipe                    this onLeft                  else if  this options onRight                       right swipe                    this onRight                            else               if   yDiff  gt  0  amp  amp  this options onUp                       up swipe                    this onUp                  else if  this options onDown                      down swipe                    this onDown                                        reset values            this xDown   null          this yDown   null            Afterward can use it as the following    let swiper   new Swipe                       onLeft                             console log  You swiped left                                 It helps to avoid console errors when you want to call only let s say  onLeft  method

User · Answer

Simple vanilla JS example for horizontal swipe  let touchstartX   0  let touchendX   0   const slider   document getElementById  slider     function handleGesture       if  touchendX  lt  touchstartX  alert  swiped left       if  touchendX  gt  touchstartX  alert  swiped right        slider addEventListener  touchstart   e   gt      touchstartX   e changedTouches 0  screenX       slider addEventListener  touchend   e   gt      touchendX   e changedTouches 0  screenX    handleGesture         You can use pretty same logic for vertical swipe

User · Answer

Some mod of uppest answer can t comment     to deal with to short swipes  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   Math abs  yDiff   gt 150     to deal with to short swipes      if   Math abs  xDiff    gt  Math abs  yDiff        most significant           if   xDiff  gt  0       left swipe                 alert  left               else     right swipe                alert  right                                            else           if   yDiff  gt  0       up swipe                alert  Up                else      down swipe                alert  Down                                                                                             reset values        xDown   null      yDown   null

User · Answer

If you just need swipe  you are better off size wise just using only the part you need  This should work on any touch device   This is  450 bytes  after gzip compression  minification  babel etc   I wrote the below class based on the other answers  it uses percentage moved instead of pixels  and a event dispatcher pattern to hook unhook things   Use it like so   const dispatcher   new SwipeEventDispatcher myElement   dispatcher on  SWIPE RIGHT        gt    console log  I swiped right          x000D   x000D  export class SwipeEventDispatcher   x000D   constructor element  options         x000D    this evtMap     x000D     SWIPE LEFT      x000D     SWIPE UP      x000D     SWIPE DOWN      x000D     SWIPE RIGHT     x000D       x000D   x000D    this xDown   null  x000D    this yDown   null  x000D    this element   element  x000D    this options   Object assign   triggerPercent  0 3    options   x000D   x000D    element addEventListener  touchstart   evt   gt  this handleTouchStart evt   false   x000D    element addEventListener  touchend   evt   gt  this handleTouchEnd evt   false   x000D     x000D   x000D   on evt  cb    x000D    this evtMap evt  push cb   x000D     x000D   x000D   off evt  lcb    x000D    this evtMap evt    this evtMap evt  filter cb   gt  cb     lcb   x000D     x000D   x000D   trigger evt  data    x000D    this evtMap evt  map handler   gt  handler data    x000D     x000D   x000D   handleTouchStart evt    x000D    this xDown   evt touches 0  clientX  x000D    this yDown   evt touches 0  clientY  x000D     x000D   x000D   handleTouchEnd evt    x000D    const deltaX   evt changedTouches 0  clientX - this xDown  x000D    const deltaY   evt changedTouches 0  clientY - this yDown  x000D    const distMoved   Math abs Math abs deltaX   gt  Math abs deltaY    deltaX   deltaY   x000D    const activePct   distMoved   this element offsetWidth  x000D   x000D    if  activePct  gt  this options triggerPercent    x000D     if  Math abs deltaX   gt  Math abs deltaY     x000D      deltaX  lt  0   this trigger  SWIPE LEFT     this trigger  SWIPE RIGHT    x000D       else   x000D      deltaY  gt  0   this trigger  SWIPE UP     this trigger  SWIPE DOWN    x000D       x000D      x000D     x000D    x000D   x000D  export default SwipeEventDispatcher  x000D   x000D   x000D

User · Answer

I wanted to detect left and right swipe only  but trigger the action only when the touch event ends  so I slightly modified the  givanse s great answer to do that  Why to do that  If for example  while swiping  the user notices he finally doesn t want to swipe  he can move his finger at the original position  a very popular  quot dating quot  phone application does this      and then the  quot swipe right quot  event is cancelled  So in order to avoid a  quot swipe right quot  event just because there is a 3px difference horizontally  I added a threshold under which an event is discarded  in order to have a  quot swipe right quot  event  the user has to swipe of at least 1 3 of the browser width  of course you can modify this   All these small details enhance the user experience  Note that currently  a  quot touch pinch zoom quot  might be detected as a swipe if one of the two fingers does a big horizontal move during the pinch zoom  Here is the  Vanilla JS  code  var xDown   null  yDown   null  xUp   null  yUp   null  document addEventListener  touchstart   touchstart  false           document addEventListener  touchmove   touchmove  false   document addEventListener  touchend   touchend  false   function touchstart evt    const firstTouch    evt touches    evt originalEvent touches  0   xDown   firstTouch clientX  yDown   firstTouch clientY    function touchmove evt    if   xDown     yDown   return  xUp   evt touches 0  clientX  yUp   evt touches 0  clientY    function touchend evt         var xDiff   xUp - xDown  yDiff   yUp - yDown      if   Math abs xDiff   gt  Math abs yDiff    amp  amp   Math abs xDiff   gt  0 33   document body clientWidth              if  xDiff  lt  0               document getElementById  leftnav   click            else             document getElementById  rightnav   click               xDown   null  yDown   null

User · Answer

An example of how to use with offset    x000D   x000D     at least 100 px are a swipe x000D     you can use the value relative to screen size  window innerWidth    1 x000D  const offset   100  x000D  let xDown  yDown x000D   x000D  window addEventListener  touchstart   e   gt    x000D    const firstTouch   getTouch e   x000D   x000D    xDown   firstTouch clientX  x000D    yDown   firstTouch clientY  x000D      x000D   x000D  window addEventListener  touchend   e   gt    x000D    if   xDown     yDown    x000D      return  x000D      x000D   x000D    const   x000D      clientX  xUp  x000D      clientY  yUp x000D        getTouch e   x000D    const xDiff   xDown - xUp  x000D    const yDiff   yDown - yUp  x000D    const xDiffAbs   Math abs xDown - xUp   x000D    const yDiffAbs   Math abs yDown - yUp   x000D   x000D       at least  lt offset gt  are a swipe x000D    if  Math max xDiffAbs  yDiffAbs   lt  offset     x000D      return  x000D      x000D   x000D    if  xDiffAbs  gt  yDiffAbs    x000D      if   xDiff  gt  0     x000D        console log  left    x000D        else   x000D        console log  right    x000D        x000D      else   x000D      if   yDiff  gt  0     x000D        console log  up    x000D        else   x000D        console log  down    x000D        x000D      x000D      x000D   x000D  function getTouch  e    x000D    return e changedTouches 0  x000D    x000D   x000D   x000D

User · Answer

Based on  givanse s answer  this is how you could do it with classes   class Swipe       constructor element            this xDown   null          this yDown   null          this element   typeof element       string    document querySelector element    element           this element addEventListener  touchstart   function evt                this xDown   evt touches 0  clientX              this yDown   evt touches 0  clientY            bind this   false               onLeft callback            this onLeft   callback           return this             onRight callback            this onRight   callback           return this             onUp callback            this onUp   callback           return this             onDown callback            this onDown   callback           return this             handleTouchMove evt            if     this xDown      this yDown                 return                     var xUp   evt touches 0  clientX          var yUp   evt touches 0  clientY           this xDiff   this xDown - xUp          this yDiff   this yDown - yUp           if   Math abs  this xDiff    gt  Math abs  this yDiff          Most significant              if   this xDiff  gt  0                     this onLeft                  else                   this onRight                            else               if   this yDiff  gt  0                     this onUp                  else                   this onDown                                        Reset values          this xDown   null          this yDown   null             run             this element addEventListener  touchmove   function evt                this handleTouchMove evt  bind this             bind this   false             You can than use it like this      Use class to get element by string  var swiper   new Swipe   my-element    swiper onLeft function     alert  You swiped left        swiper run        Get the element yourself  var swiper   new Swipe document getElementById   my-element     swiper onLeft function     alert  You swiped left        swiper run        One-liner   new Swipe   my-element    onLeft function     alert  You swiped left       run

User · Answer

Adding to this answer here  This one adds support for mouse events for testing on desktop     lt  --scripts-- gt  class SwipeEventDispatcher       constructor element  options                 this evtMap                 SWIPE LEFT                  SWIPE UP                  SWIPE DOWN                  SWIPE RIGHT                         this xDown   null          this yDown   null          this element   element          this isMouseDown   false          this listenForMouseEvents   true          this options   Object assign   triggerPercent  0 3    options            element addEventListener  touchstart   evt   gt  this handleTouchStart evt   false           element addEventListener  touchend   evt   gt  this handleTouchEnd evt   false           element addEventListener  mousedown   evt   gt  this handleMouseDown evt   false           element addEventListener  mouseup   evt   gt  this handleMouseUp evt   false              on evt  cb            this evtMap evt  push cb              off evt  lcb            this evtMap evt    this evtMap evt  filter cb   gt  cb     lcb              trigger evt  data            this evtMap evt  map handler   gt  handler data               handleTouchStart evt            this xDown   evt touches 0  clientX          this yDown   evt touches 0  clientY             handleMouseDown evt            if  this listenForMouseEvents  false  return          this xDown   evt clientX          this yDown   evt clientY          this isMouseDown   true             handleMouseUp evt            if  this isMouseDown    false  return          const deltaX   evt clientX - this xDown          const deltaY   evt clientY - this yDown          const distMoved   Math abs Math abs deltaX   gt  Math abs deltaY    deltaX   deltaY           const activePct   distMoved   this element offsetWidth           if  activePct  gt  this options triggerPercent                if  Math abs deltaX   gt  Math abs deltaY                     deltaX  lt  0   this trigger  SWIPE LEFT     this trigger  SWIPE RIGHT                  else                   deltaY  gt  0   this trigger  SWIPE UP     this trigger  SWIPE DOWN                                       handleTouchEnd evt            const deltaX   evt changedTouches 0  clientX - this xDown          const deltaY   evt changedTouches 0  clientY - this yDown          const distMoved   Math abs Math abs deltaX   gt  Math abs deltaY    deltaX   deltaY           const activePct   distMoved   this element offsetWidth           if  activePct  gt  this options triggerPercent                if  Math abs deltaX   gt  Math abs deltaY                     deltaX  lt  0   this trigger  SWIPE LEFT     this trigger  SWIPE RIGHT                  else                   deltaY  gt  0   this trigger  SWIPE UP     this trigger  SWIPE DOWN                                        add a listener on load window addEventListener  load   function event        const dispatcher   new SwipeEventDispatcher document body       dispatcher on  SWIPE RIGHT        gt    console log  I swiped right           dispatcher on  SWIPE LEFT        gt    console log  I swiped left

User · Answer

I had trouble with touchend handler firing continuously while the user was dragging a finger around   I don t know if that s due to something I m doing wrong or not but I rewired this to accumulate moves with touchmove and touchend actually fires the callback   I also needed to have a large number of these instances and so I added enable disable methods   And a threshold where a short swipe doesn t fire   Touchstart zero s the counters each time   You can change the target node on the fly   Enable on creation is optional       Usage     touchevent   new Modules TouchEventClass callback  target node   touchevent enable    touchevent disable                Touch event module        param method   set target mode      param method     touchstart      param method     touchmove      param method     touchend      param method   enable      param method   disable      param function callback      param node     target node    Modules TouchEventClass   class        constructor callback  target node  enable false                 callback function            this callback   callback           this xdown   null          this ydown   null          this enabled   false          this target node   null               move point counts  left  right  up  down             this counts                this set target node target node                Enable on creation            if  enable     true                this enable                                       Set or reset target node                param string node target node          param string      enable  optional             set target node target node  enable false                 check if we re resetting target node            if  this target node     null                     remove old listener               this disable                           Support string id of node            if  target node nodeName     undefined                target node   document getElementById target node                      this target node   target node           if  enable     true                this enable                             enable listener        enable             this enabled   true          this target node addEventListener  touchstart   this   touchstart bind this            this target node addEventListener  touchmove   this   touchmove bind this            this target node addEventListener  touchend   this   touchend bind this                   disable listener        disable             this enabled   false          this target node removeEventListener  touchstart   this   touchstart           this target node removeEventListener  touchmove   this   touchmove           this target node removeEventListener  touchend   this   touchend                  Touchstart          touchstart event            event stopPropagation            this xdown   event touches 0  clientX          this ydown   event touches 0  clientY               reset count of moves in each direction   left  right  up  down             this counts    0  0  0  0                  Touchend          touchend event            let max moves   Math max    this counts           if  max moves  gt  500       set this threshold appropriately                 swipe happened                let index   this counts indexOf max moves               if  index    0                    this callback  left                  else if  index    1                    this callback  right                  else if  index    2                    this callback  up                  else                   this callback  down                                           Touchmove          touchmove event             event stopPropagation            if    this xdown      this ydown                return                     let xup   event touches 0  clientX          let yup   event touches 0  clientY           let xdiff   this xdown - xup          let ydiff   this ydown - yup               Check x or y has greater distance            if  Math abs xdiff   gt  Math abs ydiff                 if  xdiff  gt  0                    this counts 0     Math abs xdiff                 else                   this counts 1     Math abs xdiff                           else               if  ydiff  gt  0                    this counts 2     Math abs ydiff                 else                   this counts 3     Math abs ydiff

User · Answer

I had to write a simple script for a carousel to detect swipe left or right  I utilised Pointer Events instead of Touch Events  I hope this is useful to individuals and I welcome any insights to improve my code  I feel rather sheepish to join this thread with significantly superior JS developers  function getSwipeX  elementId        this e                 document getElementsByClassName elementId  0     this initialPosition   0    this lastPosition      0    this threshold         200    this diffInPosition    null    this diffVsThreshold   null    this gestureState      0     this getTouchStart    event    gt        event preventDefault        if  window PointerEvent          this e setPointerCapture event pointerId             return this initalTouchPos   this getGesturePoint event          this getTouchMove     event    gt        event preventDefault        return this lastPosition   this getGesturePoint event          this getTouchEnd      event    gt        event preventDefault        if  window PointerEvent          this e releasePointerCapture event pointerId             this doSomething        this initialPosition   0         this getGesturePoint    event    gt        this point   event pageX     return this point         this whatGestureDirection    event    gt        this diffInPosition    this initalTouchPos - this lastPosition      this diffVsThreshold   Math abs this diffInPosition   gt  this threshold       Math sign this diffInPosition   gt  0    this gestureState    L     Math sign this diffInPosition   lt  0    this gestureState    R    this gestureState    N            return  this diffInPosition  this diffVsThreshold  this gestureState          this doSomething    event    gt        let  gestureDelta gestureThreshold gestureDirection    this whatGestureDirection            USE THIS TO DEBUG     console log gestureDelta gestureThreshold gestureDirection        if  gestureThreshold           gestureDirection     L        LEFT ACTION      RIGHT ACTION              if  window PointerEvent        this e addEventListener  pointerdown   this getTouchStart  true       this e addEventListener  pointermove   this getTouchMove  true       this e addEventListener  pointerup   this getTouchEnd  true       this e addEventListener  pointercancel   this getTouchEnd  true          You can call the function using new  window addEventListener  load        gt      let test   new getSwipeX       elementId   your div here

User · Answer

Used two   jQuery mobile  work in most of cases and specially when you are developing applicaion which uses other jQuery plugin then better to use jQuery mobile controls for this  Visit it here  https   www w3schools com jquerymobile jquerymobile events touch asp  Hammer Time   one of the best lightweight and fast javascript based library  Visit it here  https   hammerjs github io

User · Answer

I reworked  givanse s solution to function as a React hook  Input is some optional event listeners  output is a functional ref  needs to be functional so the hook can re-run when if the ref changes    Also added in vertical horizontal swipe threshold param  so that small motions don t accidentally trigger the event listeners  but these can be set to 0 to mimic original answer more closely   Tip  for best performance  the event listener input functions should be memoized   function useSwipeDetector          Event listeners      onLeftSwipe      onRightSwipe      onUpSwipe      onDownSwipe          Threshold to detect swipe      verticalSwipeThreshold   50      horizontalSwipeThreshold   30           const  domRef  setDomRef    useState null       const xDown   useRef null       const yDown   useRef null        useEffect      gt            if   domRef                return                     function handleTouchStart evt                const  firstTouch    evt touches              xDown current   firstTouch clientX              yDown current   firstTouch clientY                      function handleTouchMove evt                if   xDown current     yDown current                    return                             const  firstTouch    evt touches              const xUp   firstTouch clientX              const yUp   firstTouch clientY              const xDiff   xDown current - xUp              const yDiff   yDown current - yUp               if  Math abs xDiff   gt  Math abs yDiff      most significant                   if  xDiff  gt  horizontalSwipeThreshold                        if  onRightSwipe  onRightSwipe                      else if  xDiff  lt  -horizontalSwipeThreshold                        if  onLeftSwipe  onLeftSwipe                                    else                   if  yDiff  gt  verticalSwipeThreshold                        if  onUpSwipe  onUpSwipe                      else if  yDiff  lt  -verticalSwipeThreshold                        if  onDownSwipe  onDownSwipe                                                        function handleTouchEnd                 xDown current   null              yDown current   null                     domRef addEventListener  touchstart   handleTouchStart  false           domRef addEventListener  touchmove   handleTouchMove  false           domRef addEventListener  touchend   handleTouchEnd  false            return      gt                domRef removeEventListener  touchstart   handleTouchStart               domRef removeEventListener  touchmove   handleTouchMove               domRef removeEventListener  touchend   handleTouchEnd                      domRef  onLeftSwipe  onRightSwipe  onUpSwipe  onDownSwipe  verticalSwipeThreshold  horizontalSwipeThreshold         return  ref    gt  setDomRef ref

[javascript] Detect a finger swipe through JavaScript on the iPhone and Android

Examples related to javascript

Examples related to iphone

Examples related to android

Examples related to swipe