快捷導(dǎo)航

js下關(guān)于onmouseout、事件冒泡的問(wèn)題經(jīng)驗(yàn)小結(jié)

更新時(shí)間：2010年12月09日 19:26:33 作者：

第3次遇到這個(gè)問(wèn)題，于是總結(jié)了一下，將此短文發(fā)在首頁(yè)，希望對(duì)瀏覽器事件機(jī)制有所了解的大俠們給予解答

問(wèn)題是這樣的：一個(gè)div元素要觸發(fā)onmouseout事件，同時(shí)這個(gè)div內(nèi)部還有子元素，于是當(dāng)鼠標(biāo)移動(dòng)到該div的子元素上時(shí)，onmouseout事件也被觸發(fā)了。在要做浮動(dòng)層效果的時(shí)候會(huì)經(jīng)常遇到這個(gè)問(wèn)題。
解決方法一：
使用jQuery，這個(gè)大家都會(huì)的：

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

 
<div id="div1">觸發(fā)顯示浮動(dòng)層</div> 
<div id="div2"> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul> 
</div> 
<script> 
$("#div1").mouseover(function(){ 
$("#div2").show(); 
$("#div2").bind("mouseleave",function(){ 
$(this).hide(); 
});//此句需要寫(xiě)在觸發(fā)浮動(dòng)層的函數(shù)內(nèi) 
};); 
</script> 

解決辦法二：
利用onmousemove事件優(yōu)先的辦法，來(lái)防止在子元素中觸發(fā)onmouseout：

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

 
<div id="div1" onmouseover="document.getElementById('div2').style.display='block';">觸發(fā)顯示浮動(dòng)層</div> 
<div id="div2" onmousemove='this.style.display="";' onmouseout='this.style.display="none";'> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul> 
</div> 

您可能感興趣的文章:

相關(guān)文章

淺談Vue3.0之前你必須知道的TypeScript實(shí)戰(zhàn)技巧
這篇文章主要介紹了淺談Vue3.0之前你必須知道的TypeScript實(shí)戰(zhàn)技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
JS隨機(jī)洗牌算法之?dāng)?shù)組隨機(jī)排序
這篇文章主要介紹了JS隨機(jī)洗牌算法之給數(shù)組隨機(jī)排序的相關(guān)資料,需要的朋友可以參考下
2016-03-03
詳解JavaScript的內(nèi)置對(duì)象
本文對(duì)JavaScript對(duì)象的屬性、對(duì)象的方法、對(duì)象的屬性、訪問(wèn)對(duì)象屬性的語(yǔ)法進(jìn)行了實(shí)例分析介紹，有需要的朋友可以看下
2016-12-12
小程序?qū)崿F(xiàn)帶索引的城市列表
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)帶索引的城市列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
怎么引入(調(diào)用)一個(gè)JS文件
這篇文章主要介紹了引入(調(diào)用)一個(gè)JS文的方法，非常不錯(cuò)介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-05-05
數(shù)據(jù)排序誰(shuí)最快(javascript中的Array.prototype.sort PK 快速排序)
今天在51js論壇中看到一個(gè)網(wǎng)友發(fā)布了一個(gè)javasctipt實(shí)現(xiàn)的快速排序的算法，前些日子工作中也涉及到j(luò)avasctipt中數(shù)據(jù)排序的應(yīng)用，當(dāng)時(shí)為了提高排序速度，使用的也是快速排序的算法。
2007-01-01
IE6-8中Date不支持toISOString的修復(fù)方法
這篇文章主要介紹了IE6-8中Date不支持toISOString的修復(fù)方法,需要的朋友可以參考下
2014-05-05
javascript實(shí)現(xiàn)計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
JavaScript 聯(lián)動(dòng)的無(wú)限級(jí)封裝類(lèi),數(shù)據(jù)采用非Ajax方式,隨意添加聯(lián)動(dòng)
JavaScript 聯(lián)動(dòng)的無(wú)限級(jí)封裝類(lèi),數(shù)據(jù)采用非Ajax方式,隨意添加聯(lián)動(dòng)
2010-06-06
JS獲取復(fù)選框的值,并傳遞到后臺(tái)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JS獲取復(fù)選框的值,并傳遞到后臺(tái)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05