<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div1{ width:400px; height:400px; border:1px solid black; } .div2{ width:300px; height:300px; border:1px solid black; } .div3{ width:200px; height:200px; border:1px solid black; } .div4{ width:100px; height:100px; border:1px solid black; } </style> </head> <body> <!-- 事件冒泡：实现点击哪个div，控制台打印哪个div的class类名 --> <div class="div1" onclick="xianshi(‘div1‘,event)"> <div class="div2" onclick="xianshi(‘div2‘,event)"> <div class="div3" onclick="xianshi(‘div3‘,event)"> <div class="div4" onclick="xianshi(‘div4‘,event)"></div> </div> </div> </div> <!-- 默认事件:实现触发后面的xianshi方法，但页面不进行跳转 --> <a href="https://www.baidu.com" onclick=xianshi("a标签",event)>a标签的默认事件</a> <script type="text/javascript"> function xianshi(name,e){ console.log(name); e.stopPropagation(); e.preventDefault(); } </script> </body>
原文：https://www.cnblogs.com/wuliangfan/p/11168931.html