js事件冒泡

问题背景

<div>里面有一个<a>,当点击<a>时，<div>的点击处理也触发了，这不是我想要的。

原理

DOM中，树状结构决定了子元素肯定在父元素里，所以点击子元素，就同时点击了子元素和父元素，以及父元素的父元素；

事件从触发节点开始，逐层向上级元素传递的过程，称为事件冒泡。

测试及阻止

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div onclick="divClick()" style="height: 200px; background-color: orangered;">
 9             <a href="javascript:funHerf()" onclick="spanClick()" style="height: 100px; background-color: greenyellow;">
10                 hello
11             </a>
12         </div>
13     </body>
14     <script>
15         //测试onclick函数带参数的时候,参数到底是什么值
16         // function setVal() {
17         //     var a = 2;
18         //     var b = 3;
19         // }
20         // setVal();
21 
22         function divClick() {
23             alert("div");
24         }
25 
26         function spanClick(a, b) {
27             // alert(a + "," + b);
28             alert("span");
29             //阻止事件冒泡
30             if(event.stopPropagation){
31                 event.stopPropagation(); 
32             }else{
33                 //IE死变态,和别人不一样,要用这个方法
34                 event.cancelBubble=true;
35             }
36             //href链接总是各级onclick事件完成后执行，preventDefault（）可阻止默认href链接的执行
37             // event.preventDefault();
38         }
39 
40         function funHerf() {
41             alert("href");
42         }
43     </script>
44 </html>

 

posted @ 2019-11-13 23:07  bert_qin  阅读(224)  评论(0)  编辑  收藏  举报