jQuery Mobile - 启用滚动禁用页面拖动 [英] jQuery Mobile - Enable scrolling disable page dragging

问题描述

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

我知道我们可以使用以下javascript禁用页面拖动：

  function preventBehavior（e）
 {
 e.preventDefault（）; 
}; 
 
 document.addEventListener（touchmove，preventBehavior，false）; 
  

但是，如果启用了上述功能，内容滚动将无法工作。

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

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

  scrollbar.refresh每页上的pageinit事件下的
  

。不幸的是，我有很多页面需要滚动。 =（

有没有其他方法可以用来启用滚动而不使用第三方插件？

解决方案

将其添加到HTML头

 < script type =text / javascript ; 
 touchMove = function（event）{
 event.preventDefault（）; 
} 
< / script> 
  

然后设置

  ontouchmove =touchMove b $ b 

在您要禁用拖动的每个页面的最外侧div示例：

 < div id =mypageontouchmove =touchMove（event）> 
  

拖动可以用于没有 ontouchmove =touchMove（event）的页面

。

此解决方案要求您不要为函数preventBehavior（）添加phonegap templete代码。删除或注释：

  // function preventBehavior（e）
 // {
 // e.preventDefault（）; 
 //}; 
 //document.addEventListener(\"touchmove，preventBehavior，false）; 
  

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

I am currently developing an iOS app using phonegap 1.5 and jQuery Mobile.

I understand that we can disable page dragging using the following javascript:

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

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

However, content scrolling would not work if the above is enabled.

Is there any way I prevent users from dragging the page yet allow scrolling?

I have tried using iScroll. For that I would need to manually do a

scrollbar.refresh(); 

under the pageinit event on every page. Unfortunately, I do have many pages that require scrolling. =(

Are there any other methods which I can use to enable scrolling without using 3rd party plugins?

解决方案

Add this to HTML head

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

then set

ontouchmove="touchMove(event)"

in the outermost div for every page that you want to disable dragging. Example:

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

Dragging will be possible for pages that don't have ontouchmove="touchMove(event)".

This solution requires that you do not include the phonegap templete code for function preventBehavior(). Remove or comment it out:

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

More detailed info here: http://phonegap.pbworks.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications

这篇关于jQuery Mobile - 启用滚动禁用页面拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！