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

也许有点 hacky，但您可以尝试挂钩标签的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 回答