javascript - 为什么 `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 定义:

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

MDN 定义:

Prevents further propagation of the current event.

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