jQuery - 选择最准确的节点

Question

我有这个HTML结构:

<ul>
    <li class="foo">
        content1
        <ul>
            <li class="foo">
                content2
                <ul>
                    <li class="foo">
                        content3
                        <!-- N levels of depth -->
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我想<li>在click事件中检索第二个元素(包含"content2").我目前正在使用这种方法:

$('body').on('click', '.foo', function() {
    var $this = $(this);
    // Do something with the element
});

但是,正如您可以猜到的,这也将选择父元素,因为它还包含一个foo类.我想选择最"准确"的节点而不触发父元素的事件(例如:如果我点击content3,它应该只触发该元素的事件,而不是他的父母).

有什么建议吗？

Answer 1

幸运的是,这个解决方案非常简单!

$(document).on('click', '.foo', function( e ) {
    e.stopPropagation();
    var $this = $(this);
    // Do something with the element
});