在移动设备上滚动页面时防止触摸启动答案

【问题标题】：prevent touchstart when page scrolling on mobile在移动设备上滚动页面时防止触摸启动
【发布时间】：2014-01-04 02:53:13
【问题描述】：

我想在用户向下滚动其移动设备的页面时禁用 touchstart 事件。该页面有各种元素，当您单击时会切换一个类，但我希望当用户向下滑动以向下滚动页面时禁用 touchstart 事件。

JQUERY

$(document).on('touchstart click', '.flip-container ', function(event){                       
         event.preventDefault();
        $(this).find('.flipper').toggleClass('hover');
});

有人知道怎么做吗？谢谢！

【问题讨论】：

这能回答你的问题吗？ prevent touchstart when swiping

标签： jquery touchstart

【解决方案1】：

var touchmoved;
$('button').on('touchend', function(e){
    if(touchmoved != true){
        // you're on button click action
    }
}).on('touchmove', function(e){
    touchmoved = true;
}).on('touchstart', function(){
    touchmoved = false;
});

https://stackoverflow.com/a/32120668/3678996

【讨论】：

【解决方案2】：

我认为您可以在页面滚动时使用标志，并仅在不滚动时添加该类的切换。比如：

//SET THE FLAG
var scrolling = false;
var endScrolling;

$(window).on("scroll", function() {
    scrolling = true;
    endScrolling = window.setTimeout(function() {
        scrolling = false;
        window.clearTimeout(endScrolling);
    }, 20);
});


$(document).on('touchstart click', '.flip-container ', function(event){                       
     event.preventDefault();
    //BLOCK THE CLASS TOGGLE IF THE PAGE IS SCROLLING
    if(!scrolling) {
        $(this).find('.flipper').toggleClass('hover');
    }
});

【讨论】：

【解决方案3】：

你可以试试这样的：

var initialValue;
var finalValue;

$( 'body' ).on( 'touchstart', 'yourSelectorHere', function() {
    initialValue = $( this ).offset().top;
}).on( 'touchend', 'yourSelectorHere', function() {
    finalValue = $( this ).offset().top;
});

$( 'body' ).on( 'touchend', 'yourSelectorHere', function(e) {
    setTimeout( function(){ // is time for get the finalValue
        if( initialValue == finalValue ){
            // your code here
        }
    }, 300);
});

【讨论】：