Control gestures on Javascript in vanilla style

This is a fast and small article that will help you to know, at least, gestures made by hand on your website so don’t wait to much text.

If you need to know in vanilla Javascript, for example, an swipe element the most fast and easy way to know it its adding a event into the piece of DOM you need to know (it can be all the document or, a part of it) and knowing when the finger is pointing and use the “touchstart” and “touchend” events.

In this example we will se one finger touch events:

// Inicialize the variables
var touchStartX = 0;
var touchStartY = 0;
var touchEndX = 0;
var touchEndY = 0;

// Find the element if needed
var zoneTouched = document.querySelectorAll('.element');

// CAUTION HERE
// CAUTION HERE READ MORE
// CAUTION HERE

// Add the event
zoneTouched[0].addEventListener('touchstart', function(event) {
      // Change the variables (start)
      touchStartX = event.changedTouches[0].screenX;
      touchStartY = event.changedTouches[0].screenY;

});

zoneTouched[0].addEventListener('touchend', function(event)
       // Change the needed variables (end)
      touchEndX = event.changedTouches[0].screenX;
      touchEndY = event.changedTouches[0].screenY;
      // Do the action
      WhatImustDo();
});

As you can se it’s very easy but you must have some caution with only one thing.

The way of this work it’s the following.

We create the variables needed. We usually make it a global ones.

We find the element or elements where I will put the event. Remember this, and this is the “caution”: if the element it’s multiple remember that querySelectorAll returns an array so thats why I put the [0] index, to refer the first of the array. If . you use the getElementbyID this return only one element so you must not see the array.
Create the events.

Remember that there’s two events: touchstart and touchend.

The event touchstart (as his name says) it’s when the first time the finger touch the screen.

The event touchend happens when the finger gets out of touching the screen.

Whatever you need to do with the component you must do on the end not in the start, so, for example, if you want to move the element on the screen you must do on the touchend event. In my case it’s the function WhatImustDo.

Another thing that you must notice it’s that the way of know (in this case) the position it’s by calling the changedTouches part. This property will tell you all you need to handle the touch (documentation) but the most important it’s to know that it’s an array with the number of the finger. 0 it’s the first finger, 1 it’s the second finger, 2 it’s the third finger and so on… so you can create different behaviours according the number of fingers and what they do on the screen.

function WhatImustDo() {
  // Put a mensage in the console
  if (touchEndX < touchStartX) {
    console.log('you moved left');
  }
  if (touchEndX > touchStartX) {
    console.log('you moved right');
  }
  if (touchEndY < touchStartY) {
    console.log('you moved down');
  }
  if (touchEndY > touchStartY) {
    console.log('you moved up');
  }
  if (touchEndY == touchStartY & touchEndX == touchStartX) {
    console.log('you tapped the screen');
  }
}

This easy function will put on the console the movement over the component and it’s very easy to understand. The best of all it’s that you can create custom gestures for every component and it’s so very nice 🙂

At least, but not no important it’s recomendable that you “preventDefault” actions of your gesture in order to not let the system take control of what the user is doing, for example if the browser swipe to the right usually is for going back on the historial. So preventing this behaviour it’s basic.

So, as a resume, with this small article about gestures on your webpage you can control and create gestures needed in an easy way and in vanilla JS with, remember, it’s more fast that doing with libraries and you will not depend on third parties if you want to create custom gestures.

And, of course, this is a copy of my article that you can view on my Linkedin profile.

Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.