javascript - 親アイテムでのみクリックを機能させる

Question

中にコンテンツが入ったフッターがあります。クリックするとフッターが表示/非表示になります。しかし、フッター内のアイテムをクリックすると（ナビゲーションバーがあります）、フッターはshow\hideにも反応します。クリックに反応する親（フッター）のみを作成し、子要素を作成しないようにするにはどうすればよいですか？私はjquerymobileを使用しています。これが私のコードです：

<div data-role="footer" data-id="main_footer" data-position="fixed" data-fullscreen="true" data-visible-on-page-show="false" data-tap-toggle="false" >


                <div data-role="navbar" data-iconpos="top">
                    <ul>
                        <li><a id="menu-item-home" data-icon="custom" href="index.html" class="ui-btn-active ui-state-persist">&nbsp;</a></li>
                        <li><a id="menu-item-near-me" data-icon="custom" href="near-me.html">&nbsp;</a></li>
                        <li><a id="menu-item-rewards" data-icon="custom" href="rewards.html">&nbsp;</a></li>
                        <li><a id="menu-item-invite" data-icon="custom" href="invite.html">&nbsp;</a></li>
                        <li><a id="menu-item-profile" data-icon="custom" href="profile.html">&nbsp;</a></li>
                    </ul>
                </div><!-- /navbar -->
            </div>
            <!-- /footer -->
        </div>

そしてJS

$("#index").live('pagecreate', function() {
            $("[data-role='footer']").live("click", function() {
            if ($("[data-role='footer']").hasClass('ui-fixed-hidden'))
            {
                $("[data-role='footer']").removeClass('ui-fixed-hidden');
            }
            else
            {
                $("[data-role='footer']").addClass('ui-fixed-hidden');
            }

                });
        });

TLDR; フッター内のリンクを機能させたいのですが、リンクをクリックしているときにフッターが表示/非表示にならないようにします

Answer 1

追加できます

 $(document).on("click", "[data-role='footer'] li", function(e) {
     e.stopPropagation();
 });

非推奨onの、の代わりに使用したことに注意してください。livejQueryには便利なtoggleClass関数があることにも注意してください。したがって、既存のコードを次のように置き換えることをお勧めします

$("#index").live('pagecreate', function() {
     $(document).on("click", "[data-role='footer'] li", function(e) {
        e.stopPropagation();
     });
     $(document).on("click", "[data-role='footer']", function() {
        $("[data-role='footer']").toggleClass('ui-fixed-hidden');
     });
});

Answer 2

さまざまな理由から、実際にはを使用する.liveのではなく、に置き換えて.onください。とにかく、私はこれがうまくいくと思います：

... 'click', function (e) {
   if ($(e.target).not("[data-role=footer]")) {
      e.stopPropagation();
   }
});

Answer 3

onこれは機能するはずです...代わりに使用することをお勧めしliveます...

$(document).on("click", "[data-role='footer']", function(e) {
    if(e.target != this){
      return;
    }

    if ($("[data-role='footer']").hasClass('ui-fixed-hidden'))
    {
       $("[data-role='footer']").removeClass('ui-fixed-hidden');
    }
    else
    {
        $("[data-role='footer']").addClass('ui-fixed-hidden');
    }

 });

Answer 4

したがって、問題は、フッターのリンクが機能しないことです。clickこれに対する最も簡単な解決策は、フッター内のリンクにイベントをバインドし、$.mobile.changePage()またはwindow.location()メソッドを使用して目的のURLを開くことです。これをコードに追加します：

$("[data-role=footer] a").bind("click",function(){
    $.mobile.changePage($(this).attr("href"));
});