Skip to content

Instantly share code, notes, and snippets.

@robinNavas
Forked from akella/swipevanilla.js
Created February 27, 2021 08:49
Show Gist options
  • Save robinNavas/eb7cf6eaec0f124d1a6638cc0f296f8b to your computer and use it in GitHub Desktop.
Save robinNavas/eb7cf6eaec0f124d1a6638cc0f296f8b to your computer and use it in GitHub Desktop.
Swipes handling with vanilla js
var touchstartX = 0;
var touchstartY = 0;
var touchendX = 0;
var touchendY = 0;
var swipeme = document.getElementById('swipeme');
swipeme.addEventListener('touchstart', function(event) {
touchstartX = event.changedTouches[0].screenX;
touchstartY = event.changedTouches[0].screenY;
}, false);
swipeme.addEventListener('touchend', function(event) {
touchendX = event.changedTouches[0].screenX;
touchendY = event.changedTouches[0].screenY;
handleGesture();
}, false);
function handleGesture() {
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!');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment