|
在学习之前我们先了解几个事件对象属性： target: 指事件源对象，点击嵌套元素最里层的某元素，该元素就是target。IE6/7/8对应的是srcElement。 mouseenter ，mouseleave IE9中仍然支持，mouseenter与mouseover区别在于：在元素内部移动时mouseenter不会触发。如下 view sourceprint? 02 <html> 03 <head> 04 <meta charset="utf-8"> 05 <title>mouseerter与mouseover区别(IE下测试)</title> 06 </head> 07 <body> 08 <div id="result" style="position:absolute;right:100px;top:5px;width:250px;height:400px;border:2px solid gray;overflow:auto;"> 09 </div> 10 <h3>1，鼠标在div[id=parent1]内部移动时也会触发mouseover事件</h3> 11 <div id="parent1" style="width:400px;border:1px solid gray;padding:5px;"> 12 <div id="child11" style="width:100px;height:100px;background:gold;float:left;">Child11</div> 13 <div id="child12" style="width:100px;height:100px;background:gold;float:right;">Child12</div> 14 <div style="clear:both;"></div> 15 </div> 16 <br/> 17 <h3>2，鼠标在div[id=parent2]内部移动时也不会触发mouseenter事件</h3> 18 <div id="parent2" style="width:400px;border:1px solid gray;padding:5px;"> 19 <div id="child21" style="width:100px;height:100px;background:gold;float:left;">Child21</div> 20 <div id="child22" style="width:100px;height:100px;background:gold;float:right;">Child22</div> 21 <div style="clear:both;"></div> 22 </div> 23 24 <script type="text/javascript"> 25 function on(el,type,fn){ 26 el.addEventListener ? el.addEventListener(type, fn, false) : el.attachEvent('on' + type, fn); 27 } 28 function $(id){ 29 return document.getElementById(id); 30 } 31 var p1 = $('parent1'), 32 p2 = $('parent2'); 33 function fn(e){ 34 var d = document.createElement('div'); 35 d.innerHTML = e.type; 36 $('result').appendChild(d); 37 } 38 on(p1,'mouseover',fn); 39 on(p2,'mouseenter',fn); 40 </script> 41 <body> 42 </html> view sourceprint?01 E = function(){ 02 function elContains(a, b){ 03 try{ 04 return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16); 05 }catch(e){} 06 07 } 08 function addEvt(el, type, fn){ 09 function fun(e){ 10 var a = e.currentTarget, b = e.relatedTarget; 11 if(!elContains(a, b) && a!=b){ 12 fn.call(e.currentTarget,e); 13 } 14 } 15 if(el.addEventListener){ 16 if(type=='mouseenter'){ 17 el.addEventListener('mouseover', fun, false); 18 }else if(type=='mouseleave'){ 19 el.addEventListener('mouseout', fun, false); 20 }else{ 21 el.addEventListener(type, fn, false); 22 } 23 }else{ 24 el.attachEvent('on' + type, fn); 25 } 26 } 27 return {addEvt:addEvt}; 28 }(); |