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）。但它给了我它的父母。如：如果我点击（或悬停）祖母1，$（this）返回ITEM-3（父母的父母）

我的jQuery代码：

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

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

Answer 1

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

“文档声明stopPropagation防止事件冒泡DOM树，阻止任何事件家长处理人员被告知此事件。“

我还将live更新为on，因为live已被弃用，截至1.7

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

Answer 2

我认为以下是您正在寻找的，

$('ul li').live('click', function(e) {
    e.stopPropagation();
    someVar = $(this).data("dataname"); 
});

e.stopPropagation();停止传播到其他匹配ul li

的任何事件

注意：如果您使用的是.on jQuery v1.7，请使用.live。

$(document).on('click', 'ul li', function(e) {
    e.stopPropagation();
    alert($(this).text()); // (can be .attr(""), etc.);
});

DEMO

选择单击的元素而不是其父元素

2 个答案: