<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=\, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>事件冒泡</title> <style> .big{ width: 500px; height: 500px; border: 1px solid red; } .two{ width: 300px; height: 300px; border: 1px solid green; } .three{ width: 100px; height: 100px; border: 1px solid yellow; } </style> </head> <body> <div class="big"> <div class="two"> <div class="three"></div> </div> </div> <script> let big = document.getElementsByClassName('big')[0] let two = document.getElementsByClassName('two')[0] let three = document.getElementsByClassName('three')[0] big.onclick = function () { alert('big') } two.onclick = function () { alert('two') } three.onclick = function (e) { // 不阻止冒泡 会依次弹出 three two big e.stopPropagation() // 事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转 // return false; // 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转 直接就不执行事件直接跳出了 // event.preventDefault(); // 事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转） alert('three') } </script> </body> </html>