1

バックグラウンド：

でスワイプ イベントのナビゲーション クラスを開発しています。このクラスは、JSON 構造からツリー状のサイトマップを読み取り、swipeleftおよびswiperightイベントを割り当てて、ツリーの最上位ノードをナビゲートします。各ノードの子にswipedownおよびイベント ハンドラーを割り当て、それらの子の兄弟におよびハンドラーを割り当てます。で識別される現在読み込まれているページにこれらのハンドラーのみをアタッチし、関数を使用して、これらのハンドラーが 2 回バインドされないようにします。このクラスは、フック中に pageMap 構造を読み取ります。swipeupswipeleftswiperight$.mobile.activePage$(document).one()$(document).bind('pagebeforeshow')

以下は、ツリーの単一レベルで左スワイプと右スワイプを処理するサンプル コードのドラフトです。

/** @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() の selectors パラメータを使用してみましたが、私が探しているのは、それらのセレクタを無効にする/無効にする方法だと思いますか?

これが私のマークアップの例です (この例では、必要なものだけが取り除かれていますが、複数のフィールドセットを持つ大きなフォームを想像してください):

<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、スワイプイベント をターゲットにする方法を探していますが、 （それ自体ではなく）子ノードで発生するスワイプイベントと、divのコレクションで発生するスワイプイベントを無視します独自のスワイプイベント - 簡単に追加できるすべてのイベントを like: にクラスを追加します。ああ、もちろん、パフォーマンスを独り占めするべきではありません!!!<form><form>.ignorePageSwipe

4

0 に答える 0