A simple swipe detection on vanilla js

swipe.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;
    handleGesure();
}, 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) {
        alert('tap!');
    }
}

@tryhardest

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:
https://github.com/sciactive/tinygesture

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

@c4benn

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

Thank you, works fine for me!

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

@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

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

@jonseo check this https://gist.github.com/SleepWalker/da5636b1abcbaff48c4d?permalink_comment_id=3537435#gistcomment-3537435

especially

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

thnk you!

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

Detects horizontal swipe gestures on the given container and triggers the navigation button click if swipe distance exceeds the set threshold.

function addSwipeNavigation({ container, nextBtn, prevBtn, swipeDistance = 50 }) {

  let startX = 0;
  let endX = 0;

  function onSwipe() {
      if (endX < startX - swipeDistance && !nextBtn.disabled) {
        nextBtn.click();
      }

      if (endX > startX + swipeDistance && !prevBtn.disabled) {
        prevBtn.click();
      }
  }

  container.addEventListener("touchstart", (e) => {
    startX = e.changedTouches[0].screenX;
  });

  container.addEventListener("touchend", (e) => {
    endX = e.changedTouches[0].screenX;
    onSwipe();
  });
}