G
G
Giraffe962020-07-27 12:26:39
JavaScript
Giraffe96, 2020-07-27 12:26:39

How to disable swipe when zooming?

The site has a slider that can be swiped left/right. The problem is that the photos scroll through when zooming with two fingers. As I understand it, you need to check the number of fingers touching the sensor, and prohibit swiping if there are more than one. I tried to set a condition for executing the swipe function (event.touches.length == 1), but it doesn’t work like that. How can such a thing be implemented?

<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>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
K
kocherman, 2020-07-27
@kocherman

uncomment
e.preventDefault()the event 'touchstart'.
Also do e.preventDefault()with events 'touchmove'and'gesturechange'

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question