На сайте есть слайдер, который можно пролистывать при помощи свайпов влево\вправо. Проблема в том, что фото пролистываются при масштабировании двумя пальцами. Как понимаю, нужно сделать проверку количества пальцев, касающихся сенсора, и запретить свайп если их более одного. Пробовал ставить для исполнения функции свайпа условие (event.touches.length == 1), но это так не работает. Как можно подобное реализовать?
<script>
window.addEventListener('load', function(){
let flag = 1;
var touchsurface1 = document.getElementById('touchsurface1'),
startX,
startY,
dist,
threshold = 50, // минимальное расстояние для swipe
allowedTime = 9900, // максимальное время прохождения установленного расстояния
elapsedTime,
startTime
function handleswipe(isrightswipe){
if (isrightswipe){
slider2_15.checked = true;}
if (dist < -50){
slider2_2.checked = true;}
if (dist > -50 && dist < 50) {
if (flag) {
$('.full').css('display', 'block');
flag = 0;
}
else {
$('.full').css('display', 'none');
flag = 1;
}
}
}
touchsurface1.addEventListener('touchstart', function(e){
var touchobj = e.changedTouches[0]
dist = 0
startX = touchobj.pageX
startY = touchobj.pageY
startTime = new Date().getTime() // время контакта с поверхностью сенсора
//e.preventDefault()
}, false)
touchsurface1.addEventListener('touchend', function(e){
var touchobj = e.changedTouches[0]
dist = touchobj.pageX - startX // получаем пройденную дистанцию
elapsedTime = new Date().getTime() - startTime // узнаем пройденное время
// проверяем затраченное время,горизонтальное перемещение >= threshold, и вертикальное перемещение <= 300
var swiperightBol = (elapsedTime <= allowedTime && dist >= threshold && Math.abs(touchobj.pageY - startY) <= 300)
handleswipe(swiperightBol)
//e.preventDefault()
}, false)
}, false)
</script>
Простой
