Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

现场演示：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');
}

Answer 2

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

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

Answer 3

防止默认不会阻止事件传播到父级。您希望使用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

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

3 个答案: