Simple touch event is not working on iPhone or on iPad, But in DevTools (device mode with touch) all is okey!
My example is about slider for calculator.
element.addEventListener('touchstart', function(e) {
var startPoint = window.getComputedStyle(element).getPropertyValue('left'),
shiftX = e.touches[0].pageX - Number.parseInt(startPoint),
moveAt = function (e) {
e.preventDefault();
if (e.touches[0].pageX < 50) {
element.style.left = '50' + 'px';
} else if (e.touches[0].pageX > 330) {
element.style.left = '330' + 'px';
} else {
let accessubleDifX = e.touches[0].pageX - shiftX;
if (accessubleDifX > 50 || accessubleDifX < 330) {
element.style.left = `${accessubleDifX}px`;
console.log("imhere");
}
}
};
moveAt(e);
document.addEventListener('touchmove', function (e) {
e.preventDefault();
moveAt(e);
counting();
});
document.addEventListener('touchend', function () {
document.removeEventListener('touchmove', null);
element.removeEventListener('touchstart', null);
});
})
