3

スライダーを使用する評価ツールをJQueryMobileで構築しています。各ページを区切るための複数のdivを含む1つのファイルにすべてが含まれています。左右にスワイプできるスクリプトがあります。スクリプトは、ユーザーがスワイプしているときとスライダーを使用しているときを区別しないため、スライダーを調整すると次のページに切り替わります。

ユーザーが次のページにスワイプできるようにしたいのですが、スライダーを調整しているときはできません。助言がありますか？？スワイプイベントは次のとおりです。

<script type="text/javascript">
        $('div.ui-page').live("swipeleft", function(){
            var nextpage = $(this).next('div[data-role="page"]');
            if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide"}, false, true);
            }
        });

        $('div.ui-page').live("swiperight", function(){
            var prevpage = $(this).prev('div[data-role="page"]');
            if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide",
            reverse: true}, true, true);
            }
        });
</script>

スライダーとページは次のとおりです。

<div data-role="page">
        <h2>I can react quickly</h2>
        <input type="range" name="strength" id="strength" data-highlight="true" min="0" max="10" value="0">
</div>

私は本当に助けや提案をいただければ幸いです！

4

1 に答える 1

3

スワイプジェスチャを処理するときに、closest（）を使用して、イベントターゲット要素がスライダーウィジェット内にないかどうかを確認できます。

$("div.ui-page").live("swipeleft", function(e) {
    if (!$(e.target).closest(".ui-slider, .ui-slider-track").length) {
        var nextpage = $(this).next('div[data-role="page"]');
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide"}, false, true);
        }
    }
});

live（）はjQuery 1.7以降on（）を優先して非推奨になり、jQuery 1.9で削除されたため、次のように記述した方がよいことに注意してください。

$(document).on("swipeleft", "div.ui-page", function(e) {
    if (!$(e.target).closest(".ui-slider, .ui-slider-track").length) {
        // ...
    }
});
于 2013-03-29T08:08:04.760 に答える