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

Question

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?

Answer 1

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

Answer 2

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

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

Answer 3

I'm using jQuery Mobile and the following (executed on DOM ready) works for me:

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

Note that returning false or calling e.stopPropagation() will cause children of the body to not respond to the 'touchmove' event as well. Perhaps you are doing that in one of your event handlers which is stopping event bubbling.