onmouseover和onmouseout的一些問題思考
更新時(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)單的邏輯,這也是我們想要的!但隨之煩惱也就來了:onmouseover并不會(huì)只在移進(jìn)時(shí)才觸發(fā),onmouseout也不會(huì)只在移出時(shí)才觸發(fā)!鼠標(biāo)在DIV里面移動(dòng)時(shí)也會(huì)可能觸發(fā)onmouseover或onmouseout。
在上圖中,對(duì)于'A'來說:當(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(后)事件。
由此可見,如果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):
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)來自哪個(gè)元素
•在mouseout事件中,它指向鼠標(biāo)去往的那個(gè)元素
而Microsoft在mouseover和mouseout事件中添加了兩個(gè)屬性
•fromElement,在mouseover事件中表示鼠標(biāo)來自哪個(gè)元素
•toElement,在mouseout事件中指向鼠標(biāo)去往的那個(gè)元素
很簡(jiǎn)單的邏輯,這也是我們想要的!但隨之煩惱也就來了:onmouseover并不會(huì)只在移進(jìn)時(shí)才觸發(fā),onmouseout也不會(huì)只在移出時(shí)才觸發(fā)!鼠標(biāo)在DIV里面移動(dòng)時(shí)也會(huì)可能觸發(fā)onmouseover或onmouseout。
在上圖中,對(duì)于'A'來說:當(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(后)事件。
由此可見,如果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 ){
// 這里可以編寫 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)來自哪個(gè)元素
•在mouseout事件中,它指向鼠標(biāo)去往的那個(gè)元素
而Microsoft在mouseover和mouseout事件中添加了兩個(gè)屬性
•fromElement,在mouseover事件中表示鼠標(biāo)來自哪個(gè)元素
•toElement,在mouseout事件中指向鼠標(biāo)去往的那個(gè)元素
您可能感興趣的文章:
- js 阻止子元素響應(yīng)父元素的onmouseout事件具體實(shí)現(xiàn)
- 通過onmouseover選項(xiàng)卡實(shí)現(xiàn)img圖片的變化
- JS小功能(onmouseover實(shí)現(xiàn)選擇月份)實(shí)例代碼
- js ondocumentready onmouseover onclick onmouseout 樣式
- 兼容ie和firefox的鼠標(biāo)經(jīng)過(onmouseover和onmouseout)實(shí)現(xiàn)--簡(jiǎn)短版
- js下關(guān)于onmouseout、事件冒泡的問題經(jīng)驗(yàn)小結(jié)
- onmouseover事件和onmouseout事件全面理解
相關(guān)文章
JavaScript運(yùn)行時(shí)庫(kù)屬性一覽表
這篇文章主要介紹了JavaScript運(yùn)行時(shí)庫(kù)屬性,需要的朋友可以參考下2014-03-03
JavaScript入門教程(6) Window窗口對(duì)象
他是JavaScript中最大的對(duì)象,它描述的是一個(gè)瀏覽器窗口。一般要引用它的屬性和方法時(shí),不需要用“window.xxx”這種形式,而直接使用“xxx”。一個(gè)框架頁(yè)面也是一個(gè)窗口。2009-01-01
ASP小貼士/ASP Tips javascript tips可以當(dāng)桌面
今天看到《ASP小貼士/ASP Tips》 我也去把JavaScript的tips 下下來了。 看看是A4的。 自己把他改成1024 * 768 剛好可以用來做桌面2009-12-12
Javascript Throttle & Debounce應(yīng)用介紹
Throttle:無視一定時(shí)間內(nèi)所有的調(diào)用Debounce:一定間隔內(nèi)沒有調(diào)用時(shí),接下來將為大家介紹下Throttle & Debounce的應(yīng)用,感興趣的朋友可以參考下哈2013-03-03
深入理解ECMAScript的幾個(gè)關(guān)鍵語(yǔ)句
下面小編就為大家?guī)硪黄钊肜斫釫CMAScript的幾個(gè)關(guān)鍵語(yǔ)句。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
javaScript對(duì)象和屬性的創(chuàng)建方法
javaScript對(duì)象和屬性的創(chuàng)建方法...2007-01-01

