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

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