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>