I'm trying to fire a function through a swipe gesture using the touchstart / touchend events. It works perfectly on Android (tested on Chrome and Firefox) but not on iOS (tested on Safari and Chrome).
The page I'm working on : https://www.collectifbam.fr/design-critique/
The script :
let touchstartX = 0;
let touchstartY = 0;
let touchendX = 0;
let touchendY = 0;
const gestureZone = document.querySelector('.presentation');
gestureZone.addEventListener('touchstart', function(event) {
touchstartX = event.changedTouches[0].screenX;
touchstartY = event.changedTouches[0].screenY;
}, false);
gestureZone.addEventListener('touchend', function(event) {
touchendX = event.changedTouches[0].screenX;
touchendY = event.changedTouches[0].screenY;
handleGesture();
}, false);
function handleGesture() {
if (touchendX <= touchstartX) {
nextSlide()
}
if (touchendX >= touchstartX) {
prevSlide()
}
}