问题背景
<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>