javascript - 如何防止默认浏览器滚动与节流功能相结合的触摸移动

Question

当手指在触摸设备上移动时，我需要触发一个功能。当您 touchmove 时，默认浏览器滚动被禁用，e.preventDefault(); 请参阅JsFiddle上的第一部分。

为了减少流量，这个函数只在你从库中调用时每半秒touchmove调用一次_.throttle。underscore但是，浏览器滚动不再被禁用。见第二节。

即使调用的功能受到限制，如何在触摸设备上禁用浏览器滚动？

第 1 节

$('#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));

工作小提琴