基于mouseout和mouseover等類似事件的冒泡問題解決方法

更新時(shí)間：2013年11月18日 10:05:08 作者：

這篇文章主要介紹了關(guān)于mouseout和mouseover等類似事件的冒泡問題解決方法。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

最近寫點(diǎn)東西，比較鬧心，一個(gè)彈出層，上邊有其他元素，本意是鼠標(biāo)離開彈出層時(shí)，執(zhí)行一些動(dòng)作，但在實(shí)際應(yīng)用中，鼠標(biāo)離開彈出層中的元素時(shí)，也會(huì)激活這些動(dòng)作。試了各瀏覽器的停止事件冒泡的方法，均無(wú)效。

還是咱們javaeye里高人眾多，在一個(gè)哥們博客中發(fā)現(xiàn)了如下代碼：

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

  function isMouseLeaveOrEnter(e, handler) {    
        if (e.type != 'mouseout' && e.type != 'mouseover') return false;    
         var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;    
         while (reltg && reltg != handler)    
            reltg = reltg.parentNode;    
         return (reltg != handler);    
     } 

這個(gè)方法是判斷，當(dāng)前元素是不是要執(zhí)行mouseout事件的元素，這樣就可以避免上述問題。

您可能感興趣的文章:

相關(guān)文章

taro 實(shí)現(xiàn)購(gòu)物車邏輯的實(shí)例代碼
這篇文章主要介紹了taro 實(shí)現(xiàn)購(gòu)物車邏輯，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-06-06
基于javascript實(shí)現(xiàn)全屏漂浮廣告
這篇文章主要介紹了基于javascript實(shí)現(xiàn)全屏漂浮廣告，光標(biāo)懸浮廣告停止移動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-03-03
Javascript實(shí)現(xiàn)div的toggle效果實(shí)例分析
這篇文章主要介紹了Javascript實(shí)現(xiàn)div的toggle效果的方法,實(shí)例分析了采用純javascript實(shí)現(xiàn)toggle效果的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
關(guān)于JavaScript的內(nèi)存與性能問題解決匯總
這篇文章主要介紹了關(guān)于JavaScript的內(nèi)存與性能問題解決匯總，在JavaScript中，頁(yè)面中事件處理程序的數(shù)量與頁(yè)面整體性能直接相關(guān)，原因有很多，下面就一起來(lái)看看具體的總結(jié)吧
2022-04-04
使用Github?Actions發(fā)布npm包完整過(guò)程詳解
本文包含本地發(fā)布npm包發(fā)布流程,?和?github?action自動(dòng)發(fā)布npm包流程,幫助你更好的發(fā)布自己或公司的npm包,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-09-09
JavaScript中匿名函數(shù)用法實(shí)例
這篇文章主要介紹了JavaScript中匿名函數(shù)用法,實(shí)例分析了javascript中匿名函數(shù)的功能、定義及具體用法,需要的朋友可以參考下
2015-03-03
原生js實(shí)現(xiàn)彈動(dòng)小球效果
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)彈動(dòng)小球效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Javascript獲取隨機(jī)數(shù)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇Javascript獲取隨機(jī)數(shù)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
仿微博字符限制效果實(shí)現(xiàn)代碼
字符限制公司項(xiàng)目中有個(gè)這樣的東西，大家用微博的都明白哈
2012-04-04
基于JavaScript實(shí)現(xiàn)回到頁(yè)面頂部動(dòng)畫代碼
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)回到頁(yè)面頂部動(dòng)畫代碼的相關(guān)資料,代碼簡(jiǎn)單易用，非常實(shí)用，需要的朋友可以參考下
2016-05-05