<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>event_stop_propagation_事件_停止_传播</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ //event 是自带对象, 需要使用的时候,通过function()第一个传入. $('.son').click(function(event){ alert(1); event.stopPropagation(); // 使用event对象中的stopPropagation(停止传播),可以关闭事件冒泡. // event.stopDefault(); // 关闭默认行为 // 通常.event.stopPropagation 与 event.stopDefault // 连写为 return false; }) $('.father').click(function(){ alert(2) }) $('.grandfather').click(function(){ alert(3) return false; }) $(document).click(function(){ alert(4) }) }) </script> <style type="text/css"> .grandfather{ width: 300px; height: 300px; position: relative; background-color: tan; } .father{ width: 200px; height: 200px; background-color: cyan; } .son{ width: 100px; height: 100px; background-color: violet; position: absolute; top: 350px; } </style> </head> <body> <div class="grandfather"> <div class="father"> <div class="son"></div> </div> </div> </body> </html>