Simple Slide Gesture Detection using JavaScript

programming web dev
1

Play with example on a touch device here: https://www.kirupa.com/html5/examples/touch_js.htm

I needed to do some simple touch detection to see if the user is sliding up, down, left, or right. I wasn’t able to find any good examples online that didn’t require the use of a 3rd party library, so I modified my old mouse direction detector code to come up with the following:

var container = document.querySelector(".container");

container.addEventListener("touchstart", startTouch, false);
container.addEventListener("touchmove", moveTouch, false);

// Swipe Up / Down / Left / Right
var initialX = null;
var initialY = null;

function startTouch(e) {
  initialX = e.touches[0].clientX;
  initialY = e.touches[0].clientY;
};

function moveTouch(e) {
  if (initialX === null) {
    return;
  }

  if (initialY === null) {
    return;
  }

  var currentX = e.touches[0].clientX;
  var currentY = e.touches[0].clientY;

  var diffX = initialX - currentX;
  var diffY = initialY - currentY;

  if (Math.abs(diffX) > Math.abs(diffY)) {
    // sliding horizontally
    if (diffX > 0) {
      // swiped left
      console.log("swiped left");
    } else {
      // swiped right
      console.log("swiped right");
    }  
  } else {
    // sliding vertically
    if (diffY > 0) {
      // swiped up
      console.log("swiped up");
    } else {
      // swiped down
      console.log("swiped down");
    }  
  }

  initialX = null;
  initialY = null;
  
  e.preventDefault();
};

The .container element can be any element that accepts touch input, so don’t get too caught up on that detail haha.

If you end up using this, let me know what you think. In my limited testing, it seemed to work just fine at being able to only detect slides that are up, down, left, or right. It doesn’t do anything fancier beyond that :stuck_out_tongue:

Cheers,
Kirupa

1 Like
2

Where was this when I was searching a few months back! lol I agree, there was little to be found as a starting ground for a simple example for slide gestures. I did finally build what I needed in a React component. I kept going back to the MDN Touch Events, as confusing as it is, to build my logic! The bigger difference I ended up with is that I also added touchEnd. Touchmove gave me a true or false if there was a slide. The touchEnd allowed me to build all the arguments for direction. Your example would be able to discern direction based on a 45 degree deviation though at any length as long as the touch device wasn’t satisfied that there was only a touch event without a gesture move. TouchEnd allowed me to set a const distance for the touches. I found that this minimum const distance helped rule out lazy or accidental touche slides by the user.

I wish the internet had more examples like yours here. I think bare bones and clean code can often be much more powerful. Especially to learn from. Thanks!

2 Likes
3

Good tip about touchend! I will revisit that shortly :slight_smile:

1 Like
4

Hi, could not agree more. I am about to have a good look at this. Touch events are now a must know subject. Clean simple code is so useful. I am studying SVG at the moment so I am getting good at cleaning up code.

5

I should have also added that touch events that get designed and built into an app or website can somewhat be compared to designing layout for the many different viewports, screen sizes, and screen resolutions. There are many variances!

One example is the use of swipe left on some devices wants to trigger the browser’s history state to ‘back’ or previous. Or a down swipe can trigger a page refresh. There is a css property overscroll-behavior: that can halt these triggers within your js when you want a user to interact with your set touch events, though browser support for this is not great. The deeper one would want to satisfy all touch possibilities would definitely escalate complexity of code.