Question

我有一本类似于应用程序的书，用户可以通过滑动翻转“页面”，问题是当用户滑动整个视口移动的页面时，有没有办法阻止它？

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

Answer 1

也许有点hacky，但您可以尝试挂钩ontouchmove标记的<body>事件并通过jQuery阻止它，如下所示：

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

Answer 2

只需停用touchmove上的document事件：

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

Ipad：当使用滑动事件时，整个页面都在移动

2 个答案: