Question

美好的一天！请帮忙，我使用嵌套如果在嵌套元素中触发click事件，则调用该函数和外部父元素。如何为内部举办一次活动？

HTML

<ul>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item 2</a>
        <ul>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
        </ul>
    </li>
</ul>

Jquery的

$("ul li").on("click", function(e){
    alert($("a", this).text());
});

代码http://jsfiddle.net/fSkLb/1/

Answer 1

最简单的方法是阻止事件传播到父元素

http://jsfiddle.net/fSkLb/3/

$("ul li").on("click", function(e){    
    e.stopPropagation();
    alert($("a", this).text());
});

其他一些答案说使用return false。我不建议除非你试图阻止链接被遵循。 e.stopPropagation是副作用最少的方式。

Answer 2

您可以收听li

，而不是收听a

$("ul li a").on("click", function(e){
    alert($(this).text());
    return false;
});

此外，return false此处会停止传播。

Answer 3

您需要阻止进一步传播当前事件。所以试试这个

$("ul li").on("click", function(e){
    alert($("a", this).text());
    e.stopPropagation()
});

JS Fiddle Example

Answer 4

您可以使用事件的stopPropagation方法，这将阻止事件冒泡DOM树：

$("ul li").on("click", function(e){
    e.stopPropagation();
    alert($("a", this).text());
});

这是一个更新的jsfiddle：http://jsfiddle.net/fSkLb/5/

Answer 5

$("ul li").on("click", function(e){
    alert($("a", this).text());
    return false;
});

return false避免了事件泡沫。 stopPropagation也可以这样做。

Answer 6

我想我找到了答案......

$("ul li").on("click", function(e){
    e.stopPropagation();
    alert($("a", this).text());
});

双击jquery点击

6 个答案: