快捷導(dǎo)航

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

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

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

問題是這樣的：一個(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è)問題。
解決方法一：
使用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(); 
});//此句需要寫在觸發(fā)浮動(dòng)層的函數(shù)內(nèi) 
};); 
</script> 

解決辦法二：
利用onmousemove事件優(yōu)先的辦法，來防止在子元素中觸發(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)文章

微信小程序?qū)崿F(xiàn)topBar底部選擇欄效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)topBar底部選擇欄效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
如何使用JavaScript對(duì)圖像進(jìn)行壓縮
上傳圖片時(shí)候遇到要上傳很大的圖片,上傳的時(shí)候就會(huì)很慢,所以需要對(duì)圖片進(jìn)行壓縮處理來優(yōu)化上傳功能,這篇文章主要給大家介紹了關(guān)于如何使用JavaScript對(duì)圖像進(jìn)行壓縮的相關(guān)資料,需要的朋友可以參考下
2024-03-03
幾行js代碼實(shí)現(xiàn)自適應(yīng)
本文主要介紹了使用js獲取隱藏元素寬高的解決方案以及代碼思路，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
javaScript實(shí)現(xiàn)可縮放的顯示區(qū)效果代碼
這篇文章主要介紹了javaScript實(shí)現(xiàn)可縮放的顯示區(qū)效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
JavaScript 面向?qū)ο蟪绦蛟O(shè)計(jì)詳解【類的創(chuàng)建、實(shí)例對(duì)象、構(gòu)造函數(shù)、原型等】
這篇文章主要介紹了JavaScript 面向?qū)ο蟪绦蛟O(shè)計(jì),結(jié)合具體實(shí)例形式詳細(xì)分析了JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)中類的創(chuàng)建、實(shí)例對(duì)象、構(gòu)造函數(shù)、原型等相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-05-05
詳解JS: reduce方法實(shí)現(xiàn) webpack多文件入口
本篇文章主要介紹了詳解JS: reduce方法實(shí)現(xiàn) webpack多文件入口，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
微信小程序?qū)崿F(xiàn)打卡日歷功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)打卡日歷功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
監(jiān)控微信小程序中的慢HTTP請(qǐng)求過程詳解
這篇文章主要介紹了監(jiān)控微信小程序中的慢HTTP請(qǐng)求過程詳解，F(xiàn)undebug 的微信小程序監(jiān)控插件在 0.5.0 版本已經(jīng)支持監(jiān)控 HTTP 請(qǐng)求錯(cuò)誤，在小程序中通過wx.request發(fā)起 HTTP 請(qǐng)求，如果請(qǐng)求失敗，會(huì)被捕獲并上報(bào),需要的朋友可以參考下
2019-07-07
javascript中強(qiáng)制執(zhí)行toString()具體實(shí)現(xiàn)
Javascript通常會(huì)根據(jù)方法或運(yùn)算符的需要而自動(dòng)把值轉(zhuǎn)成所需的類型，這可能導(dǎo)致各種錯(cuò)誤，接下來為大家介紹下javascript如何強(qiáng)制執(zhí)行toString()，感興趣的朋友可以參考下哈
2013-04-04
js 下拉菜單實(shí)現(xiàn)代碼
js 下拉菜單實(shí)現(xiàn)代碼，原理比較簡單，需要的朋友可以參考下，具體的美化要靠自己。
2010-05-05