菜單導航兼容和不兼容捕獲方法
阿新 • • 發佈：2017-09-10
relative 兼容 ren != listener leave all 這就是 htm
【一】兼容性寫法
relatedTarget
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 8 <style> 9 * { 10 margin: 0px; 11 padding: 0px; 12 list-style: none; 13 } 14 15 nav { 16 position: relative; 17 } 18 19 section { 20 position: absolute; 21 left: 0px; 22 right: 0px; 23 height: 20px; 24overflow: hidden; 25 background: blue; 26 transition: 1s; 27 } 28 29 .sub { 30 height: 120px; 31 } 32 33 ul { 34 width: 1000px; 35 height: 88px; 36 margin: auto; 37 } 38 39 nav ul li { 40 height: 66px; 41 float: left; 42 border: 1px solid red; 43 padding: 10px; 44 } 45 </style> 46 </head> 47 48 <body> 49 <!-- 50 鼠標在導航區域，子導航總是彈出 51 鼠標事件： 52 移入溢出 53 relatedTarget 54 55 當鼠標溢出：到子導航或子導航的子元素上，不應該隱藏子導航 56 57 判斷一個元素，是不是section， 58 或者是不是section的子導航 59 60 parentNode 向上找。 61 ChildNodes 向下找。 62 性能都不高... 63 64 捕獲想法，可行。 65 --> 66 <nav> 67 <ul id="box"> 68 <li><span>小米</span></li> 69 <li><span>紅米</span></li> 70 <li><span>平板 · 筆記本</span></li> 71 <li><span>電視</span></li> 72 <li><span>盒子 · 影音</span></li> 73 <li><span>路由器</span></li> 74 <li><span>智能硬件</span></li> 75 <li><span>服務</span></li> 76 <li><span>社區</span></li> 77 </ul> 78 79 <section id="subnav"> 80 子導航 81 <b>99</b> 82 <div id="test"> 83 <b>99</b> 84 </div> 85 </section> 86 87 </nav> 88 89 <script> 90 var lis = document.querySelectorAll("li") 91 var subnav = document.querySelector("#subnav"); 92 var test = document.querySelector("#test"); 93 for(var i = 0; i < lis.length; i++) { 94 lis[i].onmouseenter = function() { 95 subnav.className = "sub" 96 subnav.innerHTML = this.innerHTML; 97 } 98 lis[i].onmouseleave = function(ev) { 99 100 var obj = ev.relatedTarget; 101 console.log(obj); 102 if(obj.id == "subnav") { 103 console.log("這就是子導航"); 104 } else if(!isChild(subnav, obj)) { 105 subnav.className = "" 106 } 107 108 } 109 } 110 111 subnav.onmouseleave = function() { 112 this.className = "" 113 } 114 115 //判斷一個元素是否是另外一個元素的子元素。最佳方案 116 function isChild(p, s) { 117 while(s.tagName != "BODY") { 118 if(s.parentNode == p) { 119 return 1; 120 } 121 //向上去一層 122 s = s.parentNode; 123 } 124 return 0; 125 } 126 127 console.log(isChild(subnav, test)) 128 </script> 129 </body> 130 131 </html>
【二】不兼容性寫法
addEventListener
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 8 <style> 9 * { 10 margin: 0px; 11 padding: 0px; 12 list-style: none; 13 } 14 15 nav { 16 position: relative; 17 } 18 19 section { 20 position: absolute; 21 left: 0px; 22 right: 0px; 23 height: 20px; 24 overflow: hidden; 25 background: blue; 26 transition: 1s; 27 } 28 29 .sub { 30 height: 120px; 31 } 32 33 ul { 34 width: 1000px; 35 height: 88px; 36 margin: auto; 37 } 38 39 nav ul li { 40 height: 66px; 41 float: left; 42 border: 1px solid red; 43 padding: 10px; 44 } 45 </style> 46 </head> 47 48 <body> 49 <!-- 50 鼠標在導航區域，子導航總是彈出 51 鼠標事件： 52 移入溢出 53 relatedTarget 54 55 當鼠標溢出：到子導航或子導航的子元素上，不應該隱藏子導航 56 57 判斷一個元素，是不是section， 58 或者是不是section的子導航 59 60 parentNode 向上找。 61 ChildNodes 向下找。 62 性能都不高... 63 64 捕獲想法，可行。 65 --> 66 <nav> 67 <ul id="box"> 68 <li><span>小米</span></li> 69 <li><span>紅米</span></li> 70 <li><span>平板 · 筆記本</span></li> 71 <li><span>電視</span></li> 72 <li><span>盒子 · 影音</span></li> 73 <li><span>路由器</span></li> 74 <li><span>智能硬件</span></li> 75 <li><span>服務</span></li> 76 <li><span>社區</span></li> 77 </ul> 78 79 <section id="subnav"> 80 子導航 81 <b>99</b> 82 <div id="test"> 83 <b>99</b> 84 </div> 85 </section> 86 87 </nav> 88 89 <script> 90 var lis = document.querySelectorAll("li") 91 var subnav = document.querySelector("#subnav"); 92 var test = document.querySelector("#test"); 93 for(var i = 0; i < lis.length; i++) { 94 lis[i].onmouseenter = function() { 95 subnav.className = "sub" 96 subnav.innerHTML = this.innerHTML; 97 } 98 99 lis[i].onmouseleave = function(ev) { 100 subnav.className = "" 101 subnav.addEventListener("mouseenter", function() { 102 subnav.className = "sub" 103 }, true) 104 } 105 } 106 subnav.onmouseleave = function() { 107 this.className = "" 108 } 109 </script> 110 </body> 111 112 </html>
菜單導航兼容和不兼容捕獲方法