當頁面在移動設備上滾動時，防止觸摸打開

Question

我想在用戶向下滾動移動設備的頁面時禁用touchstart事件。該頁面包含各種元素，當您單擊切換某個類時，但我想要在用戶向下滑動以向下滾動頁面時觸摸touchstart事件。

JQUERY

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

任何人任何想法如何？謝謝！

Answer 1

我想你可以在頁面滾動時使用一個標誌，並且只有當它不滾動時才添加該類的切換。喜歡的東西：

//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'); 
    } 
}); 

Answer 2

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

Answer 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); 
});