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

【问题标题】：jQuery Mobile - Enable scrolling disable page draggingjQuery Mobile - 启用滚动禁用页面拖动
【发布时间】：2012-03-13 09:12:29
【问题描述】：

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

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

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

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

但是，如果启用上述功能，内容滚动将不起作用。

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

我尝试过使用 iScroll。为此，我需要手动执行

scrollbar.refresh();

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

是否有任何其他方法可以在不使用 3rd 方插件的情况下启用滚动？

【问题讨论】：

【解决方案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)"的页面可以拖动。

此解决方案要求您不包含 function preventBehavior() 的 phonegap 模板代码。删除或注释掉它：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

请注意，返回 false 或调用 e.stopPropagation() 将导致 body 的子级也不会响应 'touchmove' 事件。也许您正在您的一个事件处理程序中执行此操作，该处理程序正在停止事件冒泡。

【讨论】：