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
