天天看點

非IE浏覽器實作onmouseenter

每次遇到onmouseover事件的處理就頭疼。比如父标簽a裡面嵌套了兩個子标簽,分别為标簽a1和a2。假設你在父标簽a上綁定了mouseover事件,理想的狀态應該是:當滑鼠從a标簽外移到a标簽上,事件觸發。

但實際情況是,在以下幾種情況下,mouseover事件都會被觸發,下圖為mouseover事件觸發示意圖(mouseout事件類似)。

當滑鼠從a标簽外移到a标簽上。

當滑鼠從父标簽a移入子标簽b(或c)。

當滑鼠從子标簽b移入子标簽c(假設間距足夠小的話)。

非IE浏覽器實作onmouseenter

之前一直是通過在事件處理函數裡面判斷觸發目前時間的targe是否指定節點來解決上面問題,問題是,當标簽嵌套層次比較多的時候,這個判斷過程就變得很麻煩,還會讓處理函數裡面多處一堆跟邏輯不相關的代碼。

請教了某同僚,ie浏覽器支援mouseenter事件,可以輕松搞定以上問題,剛好現在手頭做的東西也是隻需要支援ie浏覽器(\

(^o^)/)。然後就想了,如果突然需求變更說要支援其他非ie浏覽器了,那不就慘了(這也是很有可能發生的),像firefox、chrome都是不

支援mouseenter的。那就隻能自己試着去模拟下了:

在firefox和ie 8裡簡單測試了下,順利運作,搞定!

非IE浏覽器實作onmouseenter

以上隻是簡單地在非ie浏覽器裡模拟了mouseenter和mouseleave事件,隻是實驗下,代碼寫的有點挫各種見諒,主要的是實作的原理。

繼續閱讀