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

【问题标题】：How to prevent default browser scrolling an touchmove combined with a throttled function如何防止默认浏览器滚动与节流功能相结合的触摸移动
【发布时间】：2015-12-12 17:48:41
【问题描述】：

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

为了减少流量，此函数仅在您 touchmove 和 _.throttle 来自 underscore 库时每半秒调用一次。但是，浏览器滚动不再被禁用。见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));

【问题讨论】：

标签： javascript preventdefault throttling touchmove

【解决方案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

【讨论】：

@wurstbrotrest 没问题。很高兴它有帮助。