2013-03-14 149 views
1

我有一本书,如应用程序,用户可以通过滑动来翻动“页面”,问题是当用户滑动页面整个视口移动时,有没有办法防止它?Ipad:使用滑动事件时,整个页面正在移动

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); 
      } 
     }; 
+0

你想阻止水平+垂直滚动? – BenM 2013-03-14 10:38:41

+0

不滚动..当滑动我想要页面改变,但我不希望整个视口移动 – Tomer 2013-03-14 10:42:38

回答

2

也许有点哈克,但你可以尝试钩住ontouchmove事件<body>标签,并通过jQuery阻止它,像这样:

$("body").on({ 
    ontouchmove : function(e) { 
     e.preventDefault(); 
    } 
}); 
+0

首先,不需要jQuery那里,其次,最好是在'document'而不是'body '。 – BenM 2013-03-14 10:47:30

1

只是禁用的documenttouchmove事件:

document.touchmove = function(e) 
{ 
    e.preventDefault(); 
}; 
+1

其实什么工作对我来说既是你的,@AlistairFindlay答案的组合:'$(文件)。在( 'touchmove',函数(E) \t \t { \t \t e.preventDefault(); \t \t} );' 不知道为什么你的答案不能正常工作,但我将其标记为无论如何 – Tomer 2013-03-14 11:11:38

+0

对不起,我发现这也阻止了滚动,所以它不是一个好的解决方案,但是你做一个+1 :) – Tomer 2013-03-14 11:31:29

+0

我知道,你表示滚动不是一个问题... – BenM 2013-03-14 11:49:08