javascript - 选择被点击的元素而不是它的父元素

Question

我有一堆嵌套列表:

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3
        <ul>
            <li>child-1</li>
            <li>child-2
                <ul>
                    <li>grand-child 1</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

使用 jQuery，通过单击或悬停，我想使用元素 (li)。但它给了我它的 parent 。如:如果我点击(或悬停)孙子 1，$(this) 返回 ITEM-3( parent 的 parent )

我的 jQuery 代码:

$('ul li').live('click', function(e) {
    someVar = $(this).data("dataname"); // (can be .attr(""), etc.);
});

当单击任何一个 Li 时，我如何才能使用那个特定的 Li 而不是嵌套它的父级？

Answer 1

这有帮助吗？如果你看到 console.log，它只返回当前点击的元素。阅读有关 stopPropagation 的文档 here .

"The docs states that stopPropagation Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event."

我也将 live 更新为 on，因为 live 已从 1.7 开始弃用

$('ul li').on('click', function(e) {
   e.stopPropagation();
   console.log($(this)); 
});