javascript 如何防止 iOS 5 中 touchmove 事件的默认行为？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7756684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I prevent the default behavior of the touchmove event in iOS 5?
提问by natlee75
I have a web-based application that includes a component that the user can scroll up and down with their finger. I use the event's preventDefault method to prevent the default behavior where the touch move shifts the whole screen around on iOS devices.
我有一个基于 Web 的应用程序，其中包含一个用户可以用手指上下滚动的组件。我使用事件的 preventDefault 方法来防止在 iOS 设备上触摸移动移动整个屏幕的默认行为。
Unfortunately this does not seem to work anymore in iOS 5 which I just upgraded to this morning. I have to assume that this is just done differently in iOS 5, but I have yet to be able to find a resource that provides instructions.
不幸的是，这似乎不再适用于我今天早上刚刚升级到的 iOS 5。我必须假设这只是在 iOS 5 中完成的不同，但我还没有能够找到提供说明的资源。
Thanks!
谢谢！
Update #1: I haven't been able to find an answer to my specific question, but I was able adjust my code a bit to use the -webkit-overflow-scrolling style (set to a value of "touch") and implement the snazzy inertial scrolling capability (where the content scrolls faster depending on the velocity of your swipe and will "rubber band bounce" back if it hits the boundaries. Pretty cool looking...
更新 #1：我无法找到我的具体问题的答案，但我能够稍微调整我的代码以使用 -webkit-overflow-scrolling 样式（设置为“touch”的值）并实现时髦的惯性滚动能力（内容滚动得更快，取决于你的滑动速度，如果它触及边界，就会“橡皮筋反弹”。看起来很酷......
Update #2: I have another strange problem now. For some odd reason that overflow scrolling behavior gets mixed up sometimes whereby you have to drag your finger left and right across the containing element in order to make its contents move up and down. I have yet to be able to figure out why this happens - does anyone have any ideas???
更新 #2：我现在有另一个奇怪的问题。由于某些奇怪的原因，溢出滚动行为有时会混淆，因此您必须在包含元素上左右拖动手指才能使其内容上下移动。我还没有弄清楚为什么会发生这种情况 - 有没有人有任何想法？？？
回答by Andreas K?berle
I found a very simple solution. When the event hits your element that is allowed to scroll, just flag the event. On the event listener on the document just check if the flag is set and only stop the event if the flag isn't set:
我找到了一个非常简单的解决方案。当事件击中允许滚动的元素时，只需标记该事件。在文档上的事件侦听器上，只需检查是否设置了标志，如果未设置标志，则仅停止事件：
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();
}
});
You could also use event.stopImmediatePropagationinstead, so you dont need the eventListener on the document element, but this breaks zepto.js tapin my case:
您也可以使用event.stopImmediatePropagation代替，因此您不需要文档元素上的 eventListener ，但这tap在我的情况下会破坏 zepto.js ：
this.$scrollableEl.on('touchmove', function(event){
event.stopImmediatePropagation();
});
回答by Ryan Rapp
First, I can verify that e.preventDefault() disables all scrolling in iOS 5 using the following code:
首先，我可以使用以下代码验证 e.preventDefault() 是否禁用了 iOS 5 中的所有滚动：
document.ontouchmove = function(e){ e.preventDefault(); }
Unfortunately, however, this disables the scrolling on overflow:scroll divs. (If anyone has a solution that leaves the inner element scrolling enabled, please share.)
然而不幸的是，这会禁用滚动溢出：滚动 div。（如果有人有启用内部元素滚动的解决方案，请分享。）
Regarding update#2, I have noticed strange behavior when there is a scrollable element nested in another scrollable element (including the page itself). Sometimes the device hesitates on which element the user intends to scroll. In particular I've noticed this problem using position:fixed. My solution was to make sure the body has 100% height and that the scrollable elements use position:absolute where possible.
关于更新#2，当有一个可滚动元素嵌套在另一个可滚动元素（包括页面本身）中时，我注意到了奇怪的行为。有时设备会犹豫用户打算滚动哪个元素。特别是我使用 position:fixed 注意到了这个问题。我的解决方案是确保主体具有 100% 的高度，并且可滚动元素尽可能使用 position:absolute。
