Jquery点击子元素触发点击父元素

Question

我有类似的：

<ul>
<li class="parent">
<div class="child"></div>
</li>
</ul>

我有两个点击触发器。

$(document).on("click", ".parent", function(){
console.dir("parent clicked");
});

$(document).on("click", ".child", function(){
console.dir("child clicked");
});

如果我点击孩子，父母也会被点击！我如何避免这种情况？

http://jsfiddle.net/Vd2GA/

Answer 1

在子单击事件处理程序中使用return false或e.stopPropagation()：

$(document).on("click", ".child", function(e) {
    console.dir("child clicked");
    return false;  // e.stopPropagation();
});

演示： http : //jsfiddle.net/Vd2GA/1/