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

时间:2012-03-01 16:17:23

标签: javascript jquery css

我有一堆嵌套列表:

<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时,我如何使用该特定的一个而不是它嵌套的父级?

2 个答案:

答案 0 :(得分:3)

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

  

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

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

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

答案 1 :(得分: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