Capture Touch Events With JavaScript
June 19, 2018 by Andreas Wik
![](https://awik.io/wp-content/uploads/2018/06/touch-eventsjpg.jpg)
Whatever brilliant little project it is you’re working on, this method below should have you covered capturing swipes and taps.
Let’s first create a tiny bit of markup – the area in which you want to capture the events. In this case I’ll just give the body an ID and use that.
<body id="the-body"></body>
Let’s start with defining the variables we need:
let pageWidth = window.innerWidth || document.body.clientWidth;
let threshold = Math.max(1, Math.floor(0.01 * (pageWidth)) );
let touchstartX = 0;
let touchstartY = 0;
let touchendX = 0;
let touchendY = 0;
const limit = Math.tan(45 * 1.5 / 180 * Math.PI);
const gestureZone = document.getElementById('the-body');
As you can see, first of all we get the width of the document.
Next, we create a threshold value which will determine if the user has actually swiped or just tapped. If the user has moved their finger tip less than the threshold, it’s a tap, otherwise it’s a swipe.
We also set a limit which will help us determine whether the user swipes diagonally or vertically.
Finally, grab the area on which the touch events will be captured – in this case the body.
Let’s set up a couple of event listeners, one for when the user starts touching (oh la la) and another for when they let go. Once letting go, we’ll run a function called handleGesture() which does the actual work.
gestureZone.addEventListener('touchstart', function(event) {
touchstartX = event.changedTouches[0].screenX;
touchstartY = event.changedTouches[0].screenY;
}, false);
gestureZone.addEventListener('touchend', function(event) {
touchendX = event.changedTouches[0].screenX;
touchendY = event.changedTouches[0].screenY;
handleGesture(event);
}, false);
Pretty straightforward. We add the event listeners to our gestureZone (the body, remember?) and grab X and Y coordinates of where on the screen the gesture started and where it ended.
Once the touch event/gesture has finished, we run this function:
function handleGesture(e) {
let x = touchendX - touchstartX;
let y = touchendY - touchstartY;
let xy = Math.abs(x / y);
let yx = Math.abs(y / x);
if (Math.abs(x) > threshold || Math.abs(y) > threshold) {
// Swipe
}
else {
// Tap
}
}
What’s happening here? First, we check if the pixels moved horizontally or vertically are larger than the threshold, meaning it was a swipe. Otherwise it was a tap.
Let’s finalize the function with the last pieces, deciding if it’s a left, right, up or down swipe. All needed for that is comparing the X/Y movement with the limit variable.
function handleGesture(e) {
let x = touchendX - touchstartX;
let y = touchendY - touchstartY;
let xy = Math.abs(x / y);
let yx = Math.abs(y / x);
if (Math.abs(x) > threshold || Math.abs(y) > threshold) {
if (yx <= limit) {
if (x < 0) {
console.log("swipe left");
}
else {
console.log("swipe right");
}
}
if (xy <= limit) {
if (y < 0) {
console.log("swipe up");
}
else {
console.log("swipe down");
}
}
}
else {
console.log("tap");
}
}
Working CodePen – try it out for yourself on your touch device:
See the Pen Capture Touch Screen Swipe and Tap Events by Andreas Wik (@andreaswik) on CodePen.