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>
时间： 2024-08-04 13:16:29