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

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

MDN def:

Prevents further propagation of the current event.

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

Answer 2

阻止默认不会阻止事件传播给父级。您想要使用 event.stopPropagation(); 来阻止当前事件的进一步传播。 MDN

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

function clickIn(event) {
  event.stopPropagation();
  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>
css

Answer 3

这是因为没有默认的动作来阻止。防止默认将对用于防止默认行为的锚标记起作用。你想要做的是停止点击的传播，所以它不会从内部 div 冒泡。这样，如果您单击内部 div，则只有内部 div 单击会触发。

将您的 event.preventDefault() 替换为 event.stopPropagation()。

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

Why `event.preventDefault()` is not working for two nested divs?

html

javascript

events