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!');
    }
}

@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();
  });
}