单击点透
Posted 褪色的笔记簿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了单击点透相关的知识，希望对你有一定的参考价值。
1. 事件穿透: 在父元素和子元素上同时定义了单击事件, 当单击子元素的时候同时触发了父元素的单击事件, 因为子元素的单击事件冒泡传递给了父元素,所以防止方法就是停止冒泡传播.
2.示例
html代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>test</title> 5 <meta name="viewport" content="width=device-width"> 6 </head> 7 <body> 8 <style type="text/css"> 9 #container{ 10 background: yellow; 11 width: 300px; 12 height: 300px; 13 } 14 15 #inner{ 16 background: red; 17 width: 100px; 18 height: 100px; 19 margin: 100px; 20 } 21 22 </style> 23 24 <div id="container"> 25 this is container, without stopProgation 26 <div id="inner"> 27 this is inner, add it stop stopProgation 28 </div> 29 </div> 30 </body> 31 <script> 32 var outter = document.getElementById("container"); 33 var inner = document.getElementById("inner"); 34 35 document.body.addEventListener("click",function(){ 36 alert("you also click body"); 37 }) 38 39 outter.addEventListener("click", function(e){ 40 alert("you click the outter,without stopProgation"); 41 }) 42 43 inner.addEventListener("click", function(e){ 44 alert("you click the inner, add it stopPropagation"); 45 e.stopPropagation(); 46 },false) 47 48 </script> 49 </html>
以上是关于单击点透的主要内容，如果未能解决你的问题，请参考以下文章