一个事件冒泡的例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { $('body').click(function () { alert(4); }); $('.grandfather').click(function () { alert(3); }); $('.father').click(function () { alert(2); }); $('.son').click(function () { alert(1); }); }) </script> <style type="text/css"> .grandfather{ width:300px; height:300px; background-color: gold; position: relative; } .father{ width:200px; height:200px; background-color: hotpink; } .son{ width:100px; height:100px; background-color: chartreuse; position: absolute; left:0; top:400px; } </style> </head> <body> <div class="grandfather"> <div class="father"> <div class="son"></div> </div> </div> </body> </html>
事件冒泡有时候是不需要的,需要阻止掉,通过event.stopPropagation()来阻止