快捷導(dǎo)航

onmouseover和onmouseout的一些問(wèn)題思考

更新時(shí)間：2013年08月14日 09:26:43 作者：

這兩個(gè)事件的觸發(fā)表現(xiàn)真的就是你想要的嗎？在IE下確實(shí)有你需要的兩個(gè)這樣事件：onmouseenter 和 onmouseleave。但很不幸FF等其他瀏覽器并不支持

一個(gè)DIV層，當(dāng)鼠標(biāo)移進(jìn)的時(shí)候會(huì)觸發(fā)onmouseover，移出的時(shí)候會(huì)觸發(fā)onmouseout。

很簡(jiǎn)單的邏輯，這也是我們想要的！但隨之煩惱也就來(lái)了：onmouseover并不會(huì)只在移進(jìn)時(shí)才觸發(fā)，onmouseout也不會(huì)只在移出時(shí)才觸發(fā)！鼠標(biāo)在DIV里面移動(dòng)時(shí)也會(huì)可能觸發(fā)onmouseover或onmouseout。

在上圖中，對(duì)于'A'來(lái)說(shuō)：當(dāng)鼠標(biāo)進(jìn)入'A'(路徑'1′)時(shí)那么就會(huì)觸發(fā)'A'的onmouseover事件；接著鼠標(biāo)移動(dòng)到'B'(路徑'2′)，此時(shí)'A'會(huì)觸發(fā)onmouseout(先)和onmouseover(后)事件。

由此可見(jiàn)，如果HTML元素(‘A'層)內(nèi)還有其他元素(‘B','C'層)，當(dāng)我們移動(dòng)到這些內(nèi)部的元素時(shí)就會(huì)觸發(fā)最外層(‘A'層)的onmouseout和onmouseover事件。

這兩個(gè)事件的觸發(fā)表現(xiàn)真的就是你想要的嗎？也許你需要一個(gè)只在移進(jìn)時(shí)才觸發(fā)的，一個(gè)只在移出時(shí)才觸發(fā)的事件，不管其內(nèi)部是否還有其他元素….

解決方案

在IE下確實(shí)有你需要的兩個(gè)這樣事件：onmouseenter 和 onmouseleave。但很不幸FF等其他瀏覽器并不支持，只好模擬實(shí)現(xiàn)：

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

 
document.getElementById('...').onmouseover = function(e){ 
if( !e ) e = window.event; 
var reltg = e.relatedTarget ? e.relatedTarget : e.fromElement; 
while( reltg && reltg != this ) reltg = reltg.parentNode; 
if( reltg != this ){ 
// 這里可以編寫(xiě) onmouseenter 事件的處理代碼 
} 
} 
document.getElementById('...').onmouseout = function(e){ 
if( !e ) e = window.event; 
var reltg = e.relatedTarget ? e.relatedTarget : e.toElement; 
while( reltg && reltg != this ) reltg = reltg.parentNode; 
if( reltg != this ){ 
// 這里可以編寫(xiě) onmouseleave 事件的處理代碼 
} 
} 

備注：

W3C在mouseover和mouseout事件中添加了relatedTarget屬性

•在mouseover事件中，它表示鼠標(biāo)來(lái)自哪個(gè)元素
•在mouseout事件中，它指向鼠標(biāo)去往的那個(gè)元素
而Microsoft在mouseover和mouseout事件中添加了兩個(gè)屬性

•fromElement，在mouseover事件中表示鼠標(biāo)來(lái)自哪個(gè)元素
•toElement，在mouseout事件中指向鼠標(biāo)去往的那個(gè)元素

您可能感興趣的文章: