jquery 滑动导航带有元素的示例将不起作用

Question

我正在重新设计一个网站以适应移动设备。我想添加左右滑动来导航并找到一个使用这个 jquery 示例的方法： http://demos.jquerymobile.com/1.4.5/swipe-page/

当我将它添加到我的网站时，它运行良好。也就是说，直到我使用 data-role='page' 将一些元素放入 div 中。

我已经用 JQuery 给出的示例进行了尝试，但我遇到了同样的问题。在这个例子中（www.jouwjoure.nl/test/newyork.html），我在 div 中放入了一个 div 并尝试滑动。

滑动可以在我输入的 div 之外进行，但是当我在我输入的 div 内滑动时，什么也没有发生。

我做错了什么？

Answer 1

看demo源码中的cmets：

// Navigate to the next page on swipeleft
$( document ).on( "swipeleft", ".ui-page", function( event ) {
    // Get the filename of the next page. We stored that in the data-next
    // attribute in the original markup.
    var next = $( this ).jqmData( "next" );

    // Check if there is a next page and
    // swipes may also happen when the user highlights text, so ignore those.
    // We're only interested in swipes on the page.
    if ( next && ( event.target === $( this )[ 0 ] ) ) {
        navnext( next );
    }
});

如果添加其他元素，您可以更改代码以完成滑动。只是一个例子：

// Navigate to the next page on swipeleft
$( document ).on( "swipeleft", ".ui-page", function( event ) {
    var currPage = $(":mobile-pagecontainer").pagecontainer("getActivePage");
    var next = $(currPage).jqmData( "next" );
    if ( next ) {
        navnext( next );
    }
});

附加提示（取决于您的要求）：

此外，为避免额外的不良副作用，您还可以在添加的叠加元素上设置unselectable 和undraggable。试试看。