快捷導(dǎo)航

onmouseover和onmouseout的一些問題思考

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

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

一個DIV層，當(dāng)鼠標(biāo)移進的時候會觸發(fā)onmouseover，移出的時候會觸發(fā)onmouseout。

很簡單的邏輯，這也是我們想要的！但隨之煩惱也就來了：onmouseover并不會只在移進時才觸發(fā)，onmouseout也不會只在移出時才觸發(fā)！鼠標(biāo)在DIV里面移動時也會可能觸發(fā)onmouseover或onmouseout。

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

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

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

解決方案

在IE下確實有你需要的兩個這樣事件：onmouseenter 和 onmouseleave。但很不幸FF等其他瀏覽器并不支持，只好模擬實現(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 ){ 
// 這里可以編寫 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 ){ 
// 這里可以編寫 onmouseleave 事件的處理代碼 
} 
} 

備注：

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

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

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

您可能感興趣的文章: