# Detecting Touch Swipe Gestures **URL:** \ **Category:** programming\ **Created:** [March 26, 2018, 12:56am UTC](https://forum.kirupa.com/t/detecting-touch-swipe-gestures/637979 "2018-03-26T00:56:57Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 26, 2018, 12:56am UTC](https://forum.kirupa.com/t/detecting-touch-swipe-gestures/637979/1 "2018-03-26T00:56:57Z")
by [kirupa](http://www.kirupa.com/www.kirupa.com/me/index.htm) | 25 March 2018 In our web applications, you and I probably haven't done a whole lot of special work to handle touch-based input. Because touch is often treated as a mouse gesture, a lot of things just work for free. With that said, this doesn't mean we can't do a little extra to make our web content a bit more touch optimized. In this tutorial, the _little extra_ is around detecting the direction of a touch swipe that we can then react to. We are going to do all of this using pure 100% grass-fed JavaScript. No 3rd party libraries will be necessary! * * * This is a companion discussion topic for the original entry at [http://www.kirupa.com/html5/detecting\_touch\_swipe\_gestures.htm](http://www.kirupa.com/html5/detecting_touch_swipe_gestures.htm) ---
**Author:** ![cheestudio](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/cheestudio/32/9739_2.png) [@cheestudio](https://forum.kirupa.com/u/cheestudio)\ **Post date:** [July 6, 2019, 5:49pm UTC](https://forum.kirupa.com/t/detecting-touch-swipe-gestures/637979/2 "2019-07-06T17:49:17Z")
This is BRILLIANT! Thank you for breaking this down SO clearly. Just amazing, and just what I needed to add a simple swiper on a custom slideshow. Woot! ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [July 6, 2019, 6:17pm UTC](https://forum.kirupa.com/t/detecting-touch-swipe-gestures/637979/3 "2019-07-06T18:17:18Z")
Glad it worked out 🙂 ---
**Author:** ![Vitalicus](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vitalicus/32/12183_2.png) [@Vitalicus](https://forum.kirupa.com/u/Vitalicus)\ **Post date:** [July 31, 2020, 11:13pm UTC](https://forum.kirupa.com/t/detecting-touch-swipe-gestures/637979/4 "2020-07-31T23:13:40Z")
Uncaught SyntaxError: Malformed arrow function parameter list ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [July 31, 2020, 11:42pm UTC](https://forum.kirupa.com/t/detecting-touch-swipe-gestures/637979/5 "2020-07-31T23:42:12Z")
Can you post your code? The example on the site still works for me. Cheers, Kirupa ---
**Author:** ![Lyn\_Taylor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/lyn_taylor/32/13103_2.png) [@Lyn\_Taylor](https://forum.kirupa.com/u/Lyn_Taylor)\ **Post date:** [December 13, 2020, 9:45am UTC](https://forum.kirupa.com/t/detecting-touch-swipe-gestures/637979/6 "2020-12-13T09:45:22Z")
Great article, my first intro to touch events; However, I was lost on the explanation of exiting the function when initialX, initialY = null; it was painful to read that part, and I still don’t understand it. And if the touchMove event keeps firing, does it stop firing when we lift the finger ? The final X,Y co-ords is what is used in the DiffX, DiffY calculations? that part is not clear. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [December 15, 2020, 12:26am UTC](https://forum.kirupa.com/t/detecting-touch-swipe-gestures/637979/7 "2020-12-15T00:26:51Z")
Hi @Lyn_Taylor - welcome to the forums 🙂 Setting `initialX` and `initialY` to **null** at the end is to ensure that any previously stored value isn’t kept around. When you press down on an element with your finger, we set `initialX` and `initialY` to the position of the press. This sets us up for moving our finger and detecting the swipe direction which is a “press and move”. If we never pressed down, `initialX` and `initialY` would be set to **null** and the code for dragging will never kick in. The **touchMove** event stops firing once you lift the finger. The calculation happens continuously while you are moving your finger around. All we are measuring with `diffX` and `diffY` is the position when the finger pressed down and the position now as your finger has moved. Does this help? I can try to explain differently if needed 🙂 Cheers, Kirupa