javascript - 单击带有 JQuery 的 List-Items 输出到许多结果

Question

我确实有一个如下所示的列表项:

HTML

<ul>
    <li id="nav-menu-item-7" class="menu-element">
        <a href="google.com">TEST 2</a>
        <ul>
            <li id="nav-menu-item-8" class="menu-element">TEST 3</a></li>
            <li id="nav-menu-item-11" class="menu-element">
                PAGE 4
                <ul>
                    <li id="nav-menu-item-77" class="menu-element"><a href="http://google.com" class="menu-link sub-menu-link">LINK</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

JQUERY

$(document).ready(function(){
    $(document).on('click', '.menu-element', function(e){
        var id = $(this).attr('id').replace(/\D/g,'');

        alert(id);
    });
});

我只是想在我用 JQuery 实现的弹出窗口中输出容器的数字 ID。我现在遇到的问题是我为我单击的元素和父对象获得了一个弹出窗口。这意味着在这种情况下 77,11,7。我只想输出第一个元素，即 77 而无需更改菜单的整个结构。有任何想法吗？谢谢。

Answer 1

只需停止向父元素传播事件:

  $(document).on('click', '.menu-element', function(e){

        e.stopPropagation();

        var id = $(this).attr('id').replace(/\D/g,'');
        alert(id);
    });

您应该了解事件如何遍历 DOM，首先从文档根到被单击的元素，然后向下到文档对象。您可以在两个阶段停止传播。