Skip to content

Instantly share code, notes, and snippets.

Created September 30, 2015 04:59
Show Gist options
  • Save SleepWalker/da5636b1abcbaff48c4d to your computer and use it in GitHub Desktop.
Save SleepWalker/da5636b1abcbaff48c4d to your computer and use it in GitHub Desktop.
A simple swipe detection on vanilla js
var touchstartX = 0;
var touchstartY = 0;
var touchendX = 0;
var touchendY = 0;
var gesuredZone = document.getElementById('gesuredZone');
gesuredZone.addEventListener('touchstart', function(event) {
touchstartX = event.screenX;
touchstartY = event.screenY;
}, false);
gesuredZone.addEventListener('touchend', function(event) {
touchendX = event.screenX;
touchendY = event.screenY;
}, false);
function handleGesure() {
var swiped = 'swiped: ';
if (touchendX < touchstartX) {
alert(swiped + 'left!');
if (touchendX > touchstartX) {
alert(swiped + 'right!');
if (touchendY < touchstartY) {
alert(swiped + 'down!');
if (touchendY > touchstartY) {
alert(swiped + 'left!');
if (touchendY == touchstartY) {
Copy link

Works great, thanks!

Copy link

hperrin commented Mar 28, 2021


This is starting to look like one of the leading script threads on vanillaJS touch events. Seems like Hammer, Zing and Interactjs (pointer events) libs (interact excluded) are maybe become a bit obsolete except for drag, drop, and pointer support. Does anyone have any flushed out changes they have made since (as the thread goes back a few years)? Would be cool to keep this thread up to date with any changes or learnings. Anyone using this extensively with event listeners on touchMove? @evrenakar @tlacaelelrl @hperrin

Despite not doing any work on it in a couple years, I still do maintain and use my version with the additional features I mentioned:

Copy link

god-s-perfect-idiot commented May 23, 2021

For anyone still interesting, I just made a bit modified version to get swipe gesture controls on in-browser explorers.

 let touchstartX = 0;
    let touchstartY = 0;
    let touchendX = 0;
    let touchendY = 0;

    function handleGesture(touchstartX, touchstartY, touchendX, touchendY) {
        const delx = touchendX - touchstartX;
        const dely = touchendY - touchstartY;
        if(Math.abs(delx) > Math.abs(dely)){
            if(delx > 0) return "right"
            else return "left"
        else if(Math.abs(delx) < Math.abs(dely)){
            if(dely > 0) return "down"
            else return "up"
        else return "tap"

 const gestureZone = document.getElementById('main');
    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;
        alert(handleGesture(touchstartX, touchstartY, touchendX, touchendY))
    }, false); 

The source thread requires ultra precise swipes

Copy link


Ohh, yes. Your solution is a acting up on FF but it is the most elegant. Will do more testing.

Copy link

Thank you, works fine for me!

Copy link

jonseo commented Jun 15, 2022

Quick dumb question, how do you write a function to count the number of swipes to the left or right?

Copy link

IanRr commented Jun 22, 2022

@jonseo I'd probably just create a variable or variables outside of the addEventListener scope (so basically just at the top of the code) and then increment those inside the addEventListener function

lmk if that's too brief a description

Copy link

jonseo commented Jun 23, 2022

Yeh, thats a bit brief, can u point me to some code examples. much appreciated.

Copy link

c4benni commented Jun 23, 2022

@jonseo check this


document.querySelector('.carousel').addEventListener('touchmove', e => {
    swipeable.touchMove(e, { 
        onUp: (e, x) => console.log(e, x + 'px swiped') ,
        onLeft: (e, x) => console.log(e, x + 'px swiped')

I hope that's what you mean

Copy link

jonseo commented Jun 23, 2022

thnk you!

Copy link

Great, but still have questions about different browser compatibility issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment