1

背景：

我正在为中的滑动事件开发一个导航类。该类从 JSON 结构中读取树状站点地图，并分配swipeleft事件swiperight以浏览树中的顶级节点。它将事件处理程序分配给每个节点的子节点，并将处理swipedown程序分配给这些子节点的兄弟姐妹，等等无限级别。我只是将这些处理程序附加到当前加载的页面，由标识，并且我正在使用函数来确保这些处理程序永远不会被绑定两次。该类在挂钩期间读取 pageMap 结构。swipeupswipeleftswiperight$.mobile.activePage$(document).one()$(document).bind('pagebeforeshow')

下面是一些草稿示例代码，用于在树的单个级别中处理 swipeleft 和 swiperight：

/** @todo 
 *  tidy up the next 2 conditionals into a single function and a mapping object
 *  that can handle left, right, up and down
 */
//if this isn't the first page
if(page.prev !== undefined) {
    //attach the swipe handler to the previous page
    Utils.logger('log', 'Binding a swiperight to ' + page.id);
    $(page.id).one('swiperight', 'div.content', function(event) {
        Utils.logger('log', 'Navigating to previous slide: ' + page.prev.url); //debug
        $.mobile.changePage(            
            page.prev.url, {
                transition: 'slide',
                direction: 'reverse'
            }
        );
    });
    //debugging
    Utils.logger('log', 'Route: ' + page.prev.url + ' <== ' + page.url);
}

//if this isn't the last page
if(page.next !== undefined) {
    //attach the swipe handler to the previous page
    Utils.logger('log', 'Binding a swiperight to ' + page.id);
    $(page.id).one('swipeleft', 'div.content', function(event) {
        Utils.logger('log', 'Navigating to next slide: ' + page.next.url); //debug
        $.mobile.changePage(            
            page.next.url, {
                transition: 'slide'
            }
        );
    });
    //debugging
    Utils.logger('log', 'Route: ' + page.url + ' ==> ' + page.next.url);
}

如果您想知道，Utils.logger这只是一个简单的包装类console

问题：

我的问题是这棵树中的页面可以包含许多不同类型的元素。有些很简单，看起来很像照片库幻灯片。我对这类页面没有任何问题。其他页面包含表单和嵌套幻灯片。因此，我的页面中可能有一个 DIV，它处理滑动事件以在幻灯片中创建幻灯片 - 现在让我们忽略它并专注于更琐碎的事情：我的表单中有滑块控件之类的东西。在触摸屏上滑动滑块相当于在触摸屏上滑动……我想你知道这是怎么回事……！如果我在表单中滑动滑块，我会触发一个滑动事件，该事件会更改我导航系统中的页面...... DOH！

如何确保我的页面导航滑动只针对我的 div.content，而忽略上述所有内容？我试过使用 .on() 的选择器参数，但我认为我正在寻找的是一种否定/不是那些选择器的方法？

这是我的标记示例（对于此示例，它被简化为基本要素 - 但请想象一个具有多个字段集的大型表单）：

<div data-role="page" id="feedback" class="page">
    <div data-role="content" id="feedback-form" class="content">
        <form action="#" method="get">
            <div data-role="fieldcontain">
                <label for="more-info">Would you like more info?</label>
                <select name="slider2" id="more-info" data-role="slider">
                    <option value="off">No</option>
                    <option value="on">Yes</option>
                </select>
            </div>
            <div data-role="fieldcontain">
                <label for="slider">Please rate this presentation out of 10:</label>
                <input type="range" name="slider" id="slider" value="5" min="0" max="10" data-highlight="true"  />
            </div>
            <div class="ui-body ui-body-b">
                <fieldset class="ui-grid-a">
                        <div class="ui-block-a"><button type="reset" id="reset" data-theme="d" data-icon="delete" data-iconpos="left">Cancel</button></div>
                        <div class="ui-block-b"><button type="submit" data-theme="b" data-icon="check" data-iconpos="right" >Submit</button></div>
                </fieldset>
            </div>
        </form>
    </div>
</div>

因此，澄清和总结： 我正在寻找一种以div.content滑动事件为目标的方法，但忽略发生在<form>（不是<form>本身）的子节点上的任何滑动事件以及具有它们的 div 集合上的任何滑动事件自己的滑动事件 - 我可以轻松添加所有这些添加一个类来喜欢：.ignorePageSwipe。哦，当然它不应该是性能猪！！！

4

0 回答 0