js下關(guān)于onmouseout、事件冒泡的問題經(jīng)驗小結(jié)
更新時間：2010年12月09日 19:26:33 作者：
第3次遇到這個問題，于是總結(jié)了一下，將此短文發(fā)在首頁，希望對瀏覽器事件機(jī)制有所了解的大俠們給予解答
問題是這樣的：一個div元素要觸發(fā)onmouseout事件，同時這個div內(nèi)部還有子元素，于是當(dāng)鼠標(biāo)移動到該div的子元素上時，onmouseout事件也被觸發(fā)了。在要做浮動層效果的時候會經(jīng)常遇到這個問題。
解決方法一：
使用jQuery，這個大家都會的：
<div id="div1">觸發(fā)顯示浮動層</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ā)浮動層的函數(shù)內(nèi)
};);
</script>
解決辦法二：
利用onmousemove事件優(yōu)先的辦法，來防止在子元素中觸發(fā)onmouseout：
<div id="div1" onmouseover="document.getElementById('div2').style.display='block';">觸發(fā)顯示浮動層</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，這個大家都會的：
復(fù)制代碼 代碼如下:
<div id="div1">觸發(fā)顯示浮動層</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ā)浮動層的函數(shù)內(nèi)
};);
</script>
解決辦法二：
利用onmousemove事件優(yōu)先的辦法，來防止在子元素中觸發(fā)onmouseout：
復(fù)制代碼 代碼如下:
<div id="div1" onmouseover="document.getElementById('div2').style.display='block';">觸發(fā)顯示浮動層</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實戰(zhàn)技巧
這篇文章主要介紹了淺談Vue3.0之前你必須知道的TypeScript實戰(zhàn)技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
JS隨機(jī)洗牌算法之?dāng)?shù)組隨機(jī)排序
這篇文章主要介紹了JS隨機(jī)洗牌算法之給數(shù)組隨機(jī)排序的相關(guān)資料,需要的朋友可以參考下2016-03-03
本文對JavaScript對象的屬性、對象的方法、對象的屬性、訪問對象屬性的語法進(jìn)行了實例分析介紹，有需要的朋友可以看下2016-12-12
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)帶索引的城市列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了引入(調(diào)用)一個JS文的方法，非常不錯介紹的非常詳細(xì)，具有參考借鑒價值，感興趣的朋友一起看看吧2016-05-05
數(shù)據(jù)排序誰最快(javascript中的Array.prototype.sort PK 快速排序)
今天在51js論壇中看到一個網(wǎng)友發(fā)布了一個javasctipt實現(xiàn)的快速排序的算法，前些日子工作中也涉及到j(luò)avasctipt中數(shù)據(jù)排序的應(yīng)用，當(dāng)時為了提高排序速度，使用的也是快速排序的算法。2007-01-01
IE6-8中Date不支持toISOString的修復(fù)方法
這篇文章主要介紹了IE6-8中Date不支持toISOString的修復(fù)方法,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)計算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
JavaScript 聯(lián)動的無限級封裝類,數(shù)據(jù)采用非Ajax方式,隨意添加聯(lián)動
JavaScript 聯(lián)動的無限級封裝類,數(shù)據(jù)采用非Ajax方式,隨意添加聯(lián)動2010-06-06
JS獲取復(fù)選框的值,并傳遞到后臺的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫S獲取復(fù)選框的值,并傳遞到后臺的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05