JavaScript | 阻止事件冒泡

1. 事件冒泡：

点击子级也出现了父级容器相关的事件。

【注】和相对位置无关（不管子级和父级是否重叠都有可能会出现冒泡现象，如下图1、图2），只和包含关系有关（可以理解为子级也属于父级的一部分）。

【图1】

【图2】

2. 解决方法

【法1】给子级赋予 ev.stopPropagation()

propagation ---- n. 传播；扩展

【法2】给子级赋予 ev.cancelBubble = true

3. 测试代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" >
 6     <title>随堂</title>
 7 
 8     <style type="text/css">
 9         * {
10             margin: 20px;
11             padding: 0;
12             list-style: none;
13         }
14 
15         #div1 {
16             position: relative;
17             width: 200px;
18             height: 200px;
19             background: #FFCC33;
20             color: #333366;
21             text-align: center;
22             vertical-align: middle;
23         }
24 
25         #div2 {
26             position: absolute;
27             left: 300px;
28             top: 300px;
29             width: 50px;
30             height: 50px;
31             background: #FFFFCC;
32             color: #333366;
33             text-align: center;
34             vertical-align: middle;
35         }
36 
37 
38     </style>
39 </head>
40 <body>
41     <div id="div1">父级容器
42         <div id="div2">子级</div>
43     </div>
44 
45 
46     <script type="text/javascript">
47         
48         div1.onclick = function(){
49             alert(1);
50         }
51 
52         // 【法1 --- stopPropagation】
53         // 不要漏掉事件参数 ev
54         div2.onclick = function(){
55             ev.stopPropagation();
56         }
57 
58         // 【法2 --- cancelBubble】
59         // 不要漏掉事件参数 ev
60         div2.onclick = function(ev){
61             ev.cancelBubble = true;
62         }
63     </script>
64 
65 </body>
66 </html>

-------------------------------------------------------------------------------------------------

Reference

1. https://www.w3school.com.cn/jsref/event_stoppropagation.asp