冒泡和默认事件

 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">12345div>
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>

你可能感兴趣的:(冒泡和默认事件)