如何防止默認瀏覽器滾動TouchMove與節流功能

Question

我需要在手指在觸摸設備上移動時觸發功能。 當您touchmove時，默認瀏覽器滾動被禁用e.preventDefault(); 請參閱關於JsFiddle的第一部分。

爲了減少流量，這個功能只有每半秒調用一次，而你的touchmove和_.throttle來自underscore庫。但是，瀏覽器滾動不再被禁用。見second section。

即使被調用的函數受到限制，如何禁用瀏覽器在觸摸設備上的滾動？

第一節

$('#test1').on("touchmove", function (ev) { 
    var e = ev.originalEvent; 
    e.preventDefault(); 
    $('#test1').text(e.targetTouches[0].pageX, e.targetTouches[0].pageY); 
}); 

第2節

$('#test2').on("touchmove", _.throttle(function (ev) { 
    var e = ev.originalEvent; 
    e.preventDefault();      // browser still scrolling - why? 
    $('#test2').text(e.targetTouches[0].pageX); 
},500)); 

Answer 1

卸下e.preventDefault()並添加return false;到函數的末尾。例如：

$('#test1').on("touchmove", function (ev) { 
    var e = ev.originalEvent; 
    e.preventDefault(); 
    $('#test1').text(e.targetTouches[0].pageX, e.targetTouches[0].pageY); 
}); 


$('#test2').on("touchmove", _.throttle(function (ev) { 
    var e = ev.originalEvent; 
    $('#test2').text(e.targetTouches[0].pageX); 
    return false; 
},500)); 

Working Fiddle