为什么`event.preventDefault()`不适用于两个嵌套的div？

Question

function clickOut(event) {
  event.preventDefault();
  alert('click on out');
}

function clickIn(event) {
  event.preventDefault();
  alert('click on in');
}

#out {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
#in {
  width: 50px;
  height: 50px;
  border: 1px solid blue;
}

<div id="out" onclick="clickOut(event)">
  <div id="in" onclick="clickIn(event)">
  </div>
</div>

现场演示:http://jsbin.com/qomuteyoke/1/edit？html,css,js,output

为什么当我点击内部div时,即使我打电话,仍会弹出两个警报event.preventDefault()？首先是click on in,第二是click on out？

Answer 1

尝试使用event.stopPropagation():

jQuery def:

描述:防止事件冒泡DOM树,防止任何父处理程序被通知事件.

MDN def:

防止进一步传播当前事件.

function clickIn(event) {
    event.stopPropagation();
    alert('click on in');
}