javascript - 使点击仅适用于父项

Question

我的页脚里面有一些内容。我让我的页脚在点击时显示\隐藏。但是现在，如果我单击页脚内的任何项目(我在那里有导航栏)，我的页脚也会对显示\隐藏使用react。我如何让父元素(页脚)对点击使用react，而不是子元素？我正在使用 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>

和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 而不是 live，后者已被弃用。还要注意 jQuery 有一个有用的 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');
     });
});