Javascript 单击带有JQuery的列表项可输出多个结果

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

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>

---

我只想在一个弹出窗口中输出容器的数字ID，这是我用JQuery实现的。我现在遇到的问题是，我为单击的元素和父对象弹出了一个窗口。在本例中，这意味着77,11,7。我只想输出第一个元素，即77，而不必改变菜单的整个结构。有什么想法吗？谢谢。

只需停止事件传播到父元素：

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

        e.stopPropagation();

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

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

在警报后添加

e.stopPropagation（）

。

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

        e.stopPropagation();

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