一层一层往上找～～
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name='viewport' , content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no' /> <title>center</title> <style> body, p, div { margin: 0; padding: 0; font-size: 16px; } .small1 { width: 100px; height: 100px; background: #ccc; position: absolute; z-index: 3; } .small2 { width: 200px; height: 100px; background: #f0f; position: absolute; z-index: 2; } .small3 { width: 300px; height: 100px; background: #ff5555; position: absolute; z-index: 1; } .middle { width: 100px; height: 200px; background: #666; } .big { width: 100px; height: 300px; background: #333; } </style> </head> <body> <div class='big'> <div class='middle'> <div class='small1'></div> <div class='small2'></div> <div class='small3'></div> </div> </div> </body> <script src='//cdn.bootcss.com/jquery/3.0.0/jquery.min.js'></script> <script> $('.small1,.small2,.small3').click(function(event) { // event.stopPropagation(); 方法一 alert('aaa'); return false;// 方法二 }); $('.middle').click(function() { alert('bbb'); }); $('.big').click(function() { alert('ccc'); }) </script> </html>
只有子集、父级的情况有冒泡，兄弟级没有哦。