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ì)的：
<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)先的辦法，來(lái)防止在子元素中觸發(fā)onmouseout：
<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>
解決方法一：
使用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)先的辦法，來(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>
您可能感興趣的文章:
- js 阻止子元素響應(yīng)父元素的onmouseout事件具體實(shí)現(xiàn)
- 通過(guò)onmouseover選項(xiàng)卡實(shí)現(xiàn)img圖片的變化
- JS小功能(onmouseover實(shí)現(xiàn)選擇月份)實(shí)例代碼
- onmouseover和onmouseout的一些問(wèn)題思考
- js ondocumentready onmouseover onclick onmouseout 樣式
- 兼容ie和firefox的鼠標(biāo)經(jīng)過(guò)(onmouseover和onmouseout)實(shí)現(xiàn)--簡(jiǎn)短版
- onmouseover事件和onmouseout事件全面理解
相關(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)行壓縮處理來(lái)優(yōu)化上傳功能,這篇文章主要給大家介紹了關(guān)于如何使用JavaScript對(duì)圖像進(jìn)行壓縮的相關(guān)資料,需要的朋友可以參考下2024-03-03
本文主要介紹了使用js獲取隱藏元素寬高的解決方案以及代碼思路，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
javaScript實(shí)現(xiàn)可縮放的顯示區(qū)效果代碼
這篇文章主要介紹了javaScript實(shí)現(xiàn)可縮放的顯示區(qū)效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素屬性的相關(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
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)打卡日歷功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
監(jiān)控微信小程序中的慢HTTP請(qǐng)求過(guò)程詳解
這篇文章主要介紹了監(jiān)控微信小程序中的慢HTTP請(qǐng)求過(guò)程詳解，F(xiàn)undebug 的微信小程序監(jiān)控插件在 0.5.0 版本已經(jīng)支持監(jiān)控 HTTP 請(qǐng)求錯(cuò)誤，在小程序中通過(guò)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ò)誤，接下來(lái)為大家介紹下javascript如何強(qiáng)制執(zhí)行toString()，感興趣的朋友可以參考下哈2013-04-04
js 下拉菜單實(shí)現(xiàn)代碼，原理比較簡(jiǎn)單，需要的朋友可以參考下，具體的美化要靠自己。2010-05-05