为什么`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第2个？

Answer 1

尝试使用event.stopPropagation() ：

jQuery def：

描述：防止事件冒泡DOM树，防止任何父处理程序被通知事件。

MDN def：

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

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

Answer 2

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

用event.stopPropagation()替换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