单击带有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);
    });
});

我只想在弹出窗口中输出容器的数字ID，这是我用JQuery实现的。我现在遇到的问题是，我为单击的元素和父对象获取了弹出窗口。这意味着在这种情况下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，首先是从文档根到单击的元素，然后是文档对象。您可以在两个阶段停止传播。