Question

我有这个代码在页面之间滑动，我的内容是一个简单的图像。

问题在于我无法在图像上滑动，只能在标题和图像之间的指定区域中滑动。

但我也希望在图片上滑动到下一页。

我怎么能解决它？需要帮助

我的代码HTML5：

<div data-role="page" id="p1">
    <div data-role="header" data-theme="a" data-position="fixed" data-id="footer">                      
  <h1>2013</h1>
    </div>
    <div data-role="content">
        <img src="imagens/HomePrincipal.jpg"/>
    </div>
    <div data-role="footer" data-position="fixed" data-id="footer">                  
   <h1>Footer</h1>
    </div>
  </div>

  <div data-role="page" id="p2">
    <div data-role="header" data-position="fixed" data-id="footer">                     
  <a href="#p1" data-icon="home" data-iconpos="notext">Home</a>
        <h1>2013</h1>
    </div>
    <div data-role="content">
        <img src="imagens/PrototipoAlternativo2.jpg"/>
    </div>
    <div data-role="footer" data-position="fixed" data-id="footer">              
     <h1>Footer</h1>
    </div>
  </div>

JavaScript的：

$(document).on('swipeleft', '[data-role="page"]', function(event){    
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $(this).next('[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).on('swiperight', '[data-role="page"]', function(event){   
    if(event.handled !== true) // This will prevent event triggering more then once
    {      
        var prevpage = $(this).prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
        }
        event.handled = true;
    }
    return false;            
});

CSS master.css：

.gridContainer {
    width: 88.2%;
    max-width: 1232px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
}
#test img{position:absolute;z-index:-1}

boilerplate.css：

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

我使用jquery.mobile.1.2.0.min.css

Answer 1

（不能发表评论..）也许图像正在div上面？图像上的css z-index较低，然后在swipediv上，以便你可以到达它？

Answer 2

尝试将您的活动附加到document以外的其他内容，例如：

$( '[data-role="page"]' ).on( 'swipeleft', function( event ) {
   ...
} );

在图像上滑动

2 个答案: