javascript - 如何防止 iOS 5 中 touchmove 事件的默认行为？

Question

我有一个基于 Web 的应用程序，其中包含一个用户可以用手指上下滚动的组件。我使用事件的 preventDefault 方法来防止触摸移动在 iOS 设备上移动整个屏幕的默认行为。

不幸的是，这在我今天早上刚升级到的 iOS 5 中似乎不再有效。我不得不假设这在 iOS 5 中的做法有所不同，但我还没有找到提供说明的资源。

更新 #1:我无法找到我的特定问题的答案，但我可以稍微调整我的代码以使用 -webkit-overflow-scrolling 样式(设置到“触摸”的值)并实现时髦的惯性滚动功能(其中内容滚动速度更快，具体取决于您的滑动速度，如果它触及边界，将“橡皮筋弹回”。看起来很酷...

更新#2:我现在有另一个奇怪的问题。由于某些奇怪的原因，溢出滚动行为有时会混淆，因此您必须在包含元素上左右拖动手指才能使其内容上下移动。我还没有弄清楚为什么会发生这种情况 - 有没有人有任何想法？

Answer 1

我找到了一个非常简单的解决方案。当事件击中允许滚动的元素时，只需标记该事件。在文档的事件监听器上，只需检查是否设置了标志，如果未设置标志，则仅停止事件:

this.$scrollableEl.on('touchmove', function(event){
  event.comesFromScrollable = true;
  // when you have containers that are srollable but 
  // doesn't have enough content to scroll sometimes:
  // event.comesFromScrollable = el.offsetHeight < el.scrollHeight;
});

$(document).on('touchmove', function(event){
    if (!event.comesFromScrollable){
      event.preventDefault();
    }
});

你也可以使用 event.stopImmediatePropagation相反，因此您不需要文档元素上的 eventListener，但这会破坏 zepto.js tap 在我的例子中:

this.$scrollableEl.on('touchmove', function(event){
  event.stopImmediatePropagation();
});