快捷導(dǎo)航

為非IE瀏覽器添加mouseenter,mouseleave事件的實現(xiàn)代碼

更新時間：2011年06月21日 00:59:19 作者：

為非IE瀏覽器添加mouseenter,mouseleave事件的實現(xiàn)代碼,學(xué)習(xí)js的朋友可以參考下。

先了解幾個事件對象屬性

target 指事件源對象，點擊嵌套元素最里層的某元素，該元素就是target。IE6/7/8對應(yīng)的是srcElement。

currentTarget 指添加事件handler的元素本身，如el.addEventListener中el就是currentTarget。IE6/7/8沒有對應(yīng)屬性，可在handler內(nèi)使用this來替代如evt.currentTarget = this。

relativeTarget 指事件相關(guān)的元素，一般用在mouseover，mouseout事件中。IE6/7/8中對應(yīng)的是fromElement，toElement。
mouseenter ，mouseleave IE9中仍然支持，另見 Greg Reimer 的博文 Goodbye mouseover, hello mouseenter 。
mouseenter與mouseover區(qū)別在于：在元素內(nèi)部移動時mouseenter不會觸發(fā)。如下

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>mouseerter與mouseover區(qū)別(IE下測試)</title> 
</head> 
<body> 
<div id="result" style="position:absolute;right:100px;top:5px;width:250px;height:400px;border:2px solid gray;overflow:auto;"> 
</div> 
<h3>1，鼠標(biāo)在div[id=parent1]內(nèi)部移動時也會觸發(fā)mouseover事件</h3> 
<div id="parent1" style="width:400px;border:1px solid gray;padding:5px;"> 
<div id="child11" style="width:100px;height:100px;background:gold;float:left;">Child11</div> 
<div id="child12" style="width:100px;height:100px;background:gold;float:right;">Child12</div> 
<div style="clear:both;"></div> 
</div> 
<br/> 
<h3>2，鼠標(biāo)在div[id=parent2]內(nèi)部移動時也不會觸發(fā)mouseenter事件</h3> 
<div id="parent2" style="width:400px;border:1px solid gray;padding:5px;"> 
<div id="child21" style="width:100px;height:100px;background:gold;float:left;">Child21</div> 
<div id="child22" style="width:100px;height:100px;background:gold;float:right;">Child22</div> 
<div style="clear:both;"></div> 
</div> 
<script type="text/javascript"> 
function on(el,type,fn){ 
el.addEventListener ? el.addEventListener(type, fn, false) : el.attachEvent('on' + type, fn); 
} 
function $(id){ 
return document.getElementById(id); 
} 
var p1 = $('parent1'), 
p2 = $('parent2'); 
function fn(e){ 
var d = document.createElement('div'); 
d.innerHTML = e.type; 
$('result').appendChild(d); 
} 
on(p1,'mouseover',fn); 
on(p2,'mouseenter',fn); 
</script> 
<body> 
</html> 

了解了這三個屬性的意義后，實現(xiàn)起來就簡單了：

復(fù)制代碼代碼如下:

 
E = function(){ 
function elContains(a, b){ 
try{ 
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16); 
}catch(e){} 
} 
function addEvt(el, type, fn){ 
function fun(e){ 
var a = e.currentTarget, b = e.relatedTarget; 
if(!elContains(a, b) && a!=b){ 
fn.call(e.currentTarget,e); 
} 
} 
if(el.addEventListener){ 
if(type=='mouseenter'){ 
el.addEventListener('mouseover', fun, false); 
}else if(type=='mouseleave'){ 
el.addEventListener('mouseout', fun, false); 
}else{ 
el.addEventListener(type, fn, false); 
} 
}else{ 
el.attachEvent('on' + type, fn); 
} 
} 
return {addEvt:addEvt}; 
}(); 

測試代碼:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>mouseerter與mouseover區(qū)別(IE下測試)</title> </head> <body> <div   class="wppm3vysvbp"   id="result" style="position:absolute;right:100px;top:5px;width:250px;height:400px;border:2px solid gray;overflow:auto;"> </div> <h3>1，鼠標(biāo)在div[id=parent1]內(nèi)部移動時也會觸發(fā)mouseover事件</h3> <div   class="wppm3vysvbp"   id="parent1" style="width:400px;border:1px solid gray;padding:5px;"> <div   class="wppm3vysvbp"   id="child11" style="width:100px;height:100px;background:gold;float:left;">Child11</div> <div   class="wppm3vysvbp"   id="child12" style="width:100px;height:100px;background:gold;float:right;">Child12</div> <div style="clear:both;"></div> </div>  <h3>2，鼠標(biāo)在div[id=parent2]內(nèi)部移動時也不會觸發(fā)mouseenter事件</h3> <div   class="wppm3vysvbp"   id="parent2" style="width:400px;border:1px solid gray;padding:5px;"> <div   class="wppm3vysvbp"   id="child21" style="width:100px;height:100px;background:gold;float:left;">Child21</div> <div   class="wppm3vysvbp"   id="child22" style="width:100px;height:100px;background:gold;float:right;">Child22</div> <div style="clear:both;"></div> </div>  <body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: