Skip to content

Instantly share code, notes, and snippets.

@SleepWalker
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;
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
Copy link

jonseo commented Jun 23, 2022

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

@c4benni
Copy link

c4benni commented Jun 23, 2022

@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

@jonseo
Copy link

jonseo commented Jun 23, 2022

thnk you!

@wenlittleoil
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