1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>冒泡和默认事件</title> 6 <style type="text/css"> 7 .sub { 8 width: 100px; 9 height: 100px; 10 background-color: red; 11 position: absolute; 12 top: 50px; 13 left: 50px; 14 } 15 .sup { 16 width: 200px; 17 height: 200px; 18 background-color: orange; 19 margin: 50px auto; 20 position: relative; 21 } 22 body { 23 border: 1px solid black; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="sup"> 29 <div class="sub">12345</div> 30 </div> 31 </body> 32 <script type="text/javascript"> 33 var sub = document.querySelector(‘.sub‘); 34 var sup = document.querySelector(‘.sup‘); 35 var body = document.querySelector(‘body‘); 36 sub.onclick = function (ev) { 37 ev.stopPropagation(); 38 console.log(‘sub click‘); 39 }; 40 sup.onclick = function (ev) { 41 ev.cancelBubble = true; 42 console.log(‘sup click‘); 43 }; 44 body.onclick = function (ev) { 45 console.log(ev) 46 console.log(‘body click‘); 47 }; 48 sub.oncontextmenu = function (ev) { 49 ev.cancelBubble = true; 50 console.log(‘sub menu click‘); 51 return false; 52 }; 53 sup.oncontextmenu = function (ev) { 54 ev.preventDefault(); 55 console.log(‘sup menu click‘); 56 } 57 </script> 58 </html>
原文：https://www.cnblogs.com/xuqidong/p/12112127.html