单击点透

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>

 

posted @ 2016-06-18 10:58  peng2015  阅读(161)  评论(0)  编辑  收藏  举报