Touch Swipe Detection in Pure JavaScript

A simple touchscreen gesture recognition in pure JavaScript for single-cursor swipe up, down, left and right touch swipe detection. It is helpful for swipe to reveal/conceal menus (swipe on e.target) or wipe left/right to control slideshow position.

How to Create Touch Swipe Detection in Pure JavaScript

1. First of all, create the HTML structure as follows:

 <h1>Swipe to Detect Gestures<br><small>(touchscreen only)</small></h1> 
     <div id="surface">
     <h2 id="output">Swipe here</h2>
     </div>

2. After that, add the following CSS styles to your project:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: sans-serif;
  color: #1c5706;
  background: #013;
  position: fixed;
  top: 0;
  left: 0;
}
h1, div {
  text-align: center;
  transition: opacity .5s ease-in-out;
}
#surface{
    width: 100%;
    height: 360px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
    margin: 14px 0;
}

3. Finally, add the following JavaScript code and done.

var gesture = {
      x: [],
      y: [],
      match: ''
    },
    tolerance = 100,
    output = document.getElementById('output');

var surface = document.getElementById('surface');

surface.addEventListener('touchstart',function(e){
  e.preventDefault()
  for (i=0;i<e.touches.length;i++){
    var dot = document.createElement('em');
    dot.id = i
    dot.style.top = e.touches[i].clientY-25+'px'
    dot.style.left = e.touches[i].clientX-25+'px'
    document.body.appendChild(dot)
    gesture.x.push(e.touches[i].clientX)
    gesture.y.push(e.touches[i].clientY)
  }
});
surface.addEventListener('touchmove',function(e){
  e.preventDefault()
  for (var i=0; i<e.touches.length; i++) {
    var dot = document.getElementById(i);
    dot.style.top = e.touches[i].clientY-25+'px'
    dot.style.left = e.touches[i].clientX-25+'px'
    gesture.x.push(e.touches[i].clientX)
    gesture.y.push(e.touches[i].clientY)
  }
});
surface.addEventListener('touchend',function(e){
  var dots = document.querySelectorAll('em'),
      xTravel = gesture.x[gesture.x.length-1] - gesture.x[0],
      yTravel = gesture.y[gesture.y.length-1] - gesture.y[0];
  if (xTravel<tolerance && xTravel>-tolerance && yTravel<-tolerance){
    gesture.match = 'Swiped Up'
  }
  if (xTravel<tolerance && xTravel>-tolerance && yTravel>tolerance){
    gesture.match = 'Swiped Down'
  }
  if (yTravel<tolerance && yTravel>-tolerance && xTravel<-tolerance){
    gesture.match = 'Swiped Left'
  }
  if (yTravel<tolerance && yTravel>-tolerance && xTravel>tolerance){
    gesture.match = 'Swiped Right'
  }
  if (gesture.match!==''){
    output.innerHTML = gesture.match
    output.style.opacity = 1
  }
  setTimeout(function(){
    output.style.opacity = 1
  },500)
  gesture.x = []
  gesture.y = []
  gesture.match = xTravel = yTravel = ''
  for (i=0;i<dots.length;i++){
    dots[i].id = ''
    dots[i].style.opacity = 1
    setTimeout(function(){
      document.body.removeChild(dots[i])
    },1000)
  }
})

That’s all! hopefully, you have successfully integrated this touch swipe detection code snippet into your project. If you have any questions or facing any issues, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.