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

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