1

私は本のようなアプリケーションを持っていて、ユーザーはスワイプして「ページ」をめくることができます.問題は、ユーザーがページをスワイプするとビューポート全体が移動することです.それを防ぐ方法はありますか?

HTML の抜粋:

    <div data-title="Strategy" data-role="page" role="main" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 545px;">
  <div data-role="content" class="caspBookCon ui-content" role="main">

    <div class="caspBookWrapper">
      <div class="caspBookLeft" data-bind="event: { swiperight: prevPage },visible:true" style="display: block;">
<div data-title="Home" role="main" data-cafevm="sp/book/strategy">
  <!-- ko if: isEditable() -->
  <a href="#" class="caspEdit" data-bind="visible: !editMode(), click:setEditMode" title="Edit"></a>
  <!-- /ko -->
  <div class="caspBtnGrayOverlay" data-bind="visible: editMode()" style="display: none;">
    <a href="#" class="caspButton caspBtnGray" data-bind="click:saveEdit">Done</a>
  </div>

JS:

/**
         * Move to next page.
         * @param  {[type]} d [description]
         * @param  {[type]} e [description]
         * @return {[type]}   [description]
         */
        var nextPage = function(d, e) {
            var chapter = ca.sp.book.currentChapter;

            if(chapter.isEnd()) {
                $.when(changeChapter(true)).then(function(chapter){
                    showPage(chapter);
                });
            } else {
                chapter.changePage(true);
                showPage(chapter);
            }
        };

        /**
         * Move to previous page
         * @param  {[type]} d [description]
         * @param  {[type]} e [description]
         * @return {[type]}   [description]
         */
        var prevPage = function(d, e) {
            var chapter = ca.sp.book.currentChapter;

            if(chapter.isStart()) {
                $.when(changeChapter(false)).then(function(chapter){
                    showPage(chapter);
                });
            } else {
                chapter.changePage(false);
                showPage(chapter);
            }
        };
4

2 に答える 2

2

ontouchmove少しハッキーかもしれませんが、次のように、タグのイベントにフックして、 <body>jQueryを介してブロックしてみることができます。

$("body").on({
    ontouchmove : function(e) {
        e.preventDefault(); 
    }
});
于 2013-03-14T10:44:12.243 に答える
1

：でtouchmoveイベントを無効にするだけです。document

document.touchmove = function(e)
{ 
    e.preventDefault(); 
};
于 2013-03-14T10:45:01.810 に答える