jQuery下如何不触发父级元素的事件(jQuery + javascript )

Question

有 html 代码如下 
<div id="divParent"> 
    <div id="divChild1"></div>
    <div id="divChild2"></div>
    <div id="divChild3"></div>
    <div id="divChild4"></div>
</div>
让这段代码加上Click事件
<script>
    $("#divParent").click(function(){
        alert("parent clicked");
    })
    $("#divChild1,#divChild2,#divChild3,#divChild4").click(function(){
        alert("child clicked");
    })
</script>
如上，当我点击 divChild1
会先后弹出,child clicked , parent clicked 
如何保留父级元素的click事件，但同时点击 divChild1 只弹出child clicked ? 

Answer 1

$("#divChild1,#divChild2,#divChild3,#divChild4").click(function(e){
  alert("child clicked");
  e.stopPropagation();//阻止冒泡
})

Answer 2

return false要慎用，它实际上做了3件事情：
1.event.preventDefault();
2.event.stopPropagation();
3.停止回调函数执行并立即返回。

Answer 3

$("#divParent").click(function(){
  alert("parent clicked");
  })
  $("#divChild1,#divChild2,#divChild3,#divChild4").click(function(event){
  alert("child clicked");
  event.stopPropagation();
  })还有$("#divChild1,#divChild2,#divChild3,#divChild4")其实可以换成$("#divParent").children()