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

Question

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

的第一部分

为了减少流量，当您使用 underscore 库中的 _.throttle touchmove 时，此函数仅每半秒调用一次。但是，浏览器滚动不再被禁用。参见 second section。

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

第 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));

Working Fiddle

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

How to prevent default browser scrolling an touchmove combined with a throttled function

javascript

throttling

preventdefault

touchmove