jQuery Mobile - 启用滚动禁用页面拖动

Question

我目前正在使用phonegap 1.5和jQuery Mobile开发iOS应用程序。

我了解我们可以使用以下javascript禁用页面拖动：

function preventBehavior(e)  
{ 
    e.preventDefault(); 
};

document.addEventListener("touchmove", preventBehavior, false);

但是，如果启用了上述内容滚动，则无法进行内容滚动。

有什么办法可以阻止用户拖动页面但是允许滚动吗？

我尝试过使用iScroll。 为此，我需要手动做一个

scrollbar.refresh(); 

在每页的pageinit事件下。 不幸的是，我确实有很多需要滚动的页面。 =（

是否还有其他方法可以在不使用第三方插件的情况下启用滚动功能？

Answer 1

将其添加到HTML头

<script type="text/javascript">
    touchMove = function(event) {
        event.preventDefault();
    }
</script>

然后设定

ontouchmove="touchMove(event)"

在您要禁用拖动的每个页面的最外层div中。 例：

<div id="mypage" ontouchmove="touchMove(event)">

对于没有ontouchmove =“touchMove（event）”的页面，可以进行拖动。

此解决方案要求您不要为函数 preventBehavior （）包含phonegap模板代码。 删除或评论出来：

//function preventBehavior(e) 
//{ 
//    e.preventDefault();
//};
//document.addEventListener("touchmove", preventBehavior, false);

更详细的信息： http ： //phonegap.pbworks.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications

Answer 2

$(document).delegate('.ui-page', 'touchmove', false);

这更有可能起作用，取决于您希望禁用触摸的内容。

Answer 3

我正在使用jQuery Mobile，以下（在DOM就绪上执行）对我有用：

$('body').on('touchmove', function(e) {
    e.preventDefault();
});

请注意，返回false或调用e.stopPropagation（）将导致正文的子级也不响应“touchmove”事件。 也许你在一个阻止事件冒泡的事件处理程序中这样做。