Javascript 使单击仅对父项有效

我有一些内容内页脚。我让我的页脚在单击时显示\隐藏。但现在，如果我点击页脚内的任何项目，我的页脚也会在显示\隐藏时做出反应。如何仅使parentfooter在单击时作出反应，而不使任何子元素作出反应？我用的是jquery手机。 这是我的密码：

<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>

TLDR； 我想使页脚内的链接正常工作，但不想在单击可以添加的链接时触发页脚显示\隐藏

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

请注意，我使用了on而不是live，这是不推荐使用的。还要注意jQuery有一个有用的函数。因此，我建议您将现有代码替换为

$("#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');
     });
});

你可以加上

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

请注意，我使用了on而不是live，这是不推荐使用的。还要注意jQuery有一个有用的函数。因此，我建议您将现有代码替换为

$("#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');
     });
});

---

出于各种原因，您不应该实际使用.live，而应该将其替换为.on。无论如何，我认为这会起作用：

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

---

出于各种原因，您不应该实际使用.live，而应该将其替换为.on。无论如何，我认为这会起作用：

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

---

这应该行得通…我建议你在现场使用

---

这应该行得通…我建议你在现场使用

---

所以您的问题是，页脚中的链接不起作用。最简单的解决方案是将单击事件绑定到页脚内的链接，并使用$.mobile.changePage或window.location方法打开所需的url。将此添加到您的代码中：

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

---

所以您的问题是，页脚中的链接不起作用。最简单的解决方案是将单击事件绑定到页脚内的链接，并使用$.mobile.changePage或window.location方法打开所需的url。将此添加到您的代码中：

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

---

无论你想去哪里，都不重要。问题是当我点击页脚内的链接时，它不起作用。有没有办法只让它们工作，而不让触发器页脚显示\隐藏？我一开始没看到你想让链接工作。请参阅编辑后的答案。@sannySin我想您必须在e.stopPropagation下面添加location.href=[单击链接的地址]。我有5个链接，我必须添加哪些链接？PS：所有链接都是通过Ajax加载的，因为jQueryMobileWhere是你想要的，这并不重要。问题是当我点击页脚内的链接时，它不起作用。有没有办法只让它们工作，而不让触发器页脚显示\隐藏？我一开始没看到你想让链接工作。请参阅编辑后的答案。@sannySin我想您必须在e.stopPropagation下面添加location.href=[单击链接的地址]。我有5个链接，我必须添加哪些链接？注：所有链接都是通过Ajax加载的，因为jquery mobileit仍然会触发我的页脚，如果我点击navbarit中的链接，它仍然会触发我的页脚，如果我点击NavBart中的链接，它仍然会触发我的页脚。它们实际上是有效的，但当我点击链接时，它也会触发我的页脚显示\隐藏，因此，我试图在不破坏jquery mobile的ajax功能的情况下，使链接不会触发我的页脚切换。它们实际上可以工作，但当我单击链接时，它也会触发我的页脚显示\隐藏，因此我试图使链接不会触发我的页脚切换，而不会破坏jquery mobile的ajax功能