js中hover事件時候的BUG以及解決方法


hover事件是我們在開發前段時候遇到的稀松平常的問題,但是有沒有發現會出現有一個BUg,比如,你移動到一個元素上,讓它執行一個方法,然后你快速的移入移出的時候,他會進行亮瞎你眼睛的頻閃效果,而且跟得了老年痴呆一樣會進行延時顯示,24K鈦合金也會被閃瞎的,鼠標重復在相應區域滑動的時候,動畫會一直執行,直到和鼠標經過的次數相同位置。比如鼠標移進3次,移出3次,動畫就會出現三次。這顯然是極度影響用戶體驗的。然后我們公司大后端告訴我說把mouseevent和monseleave合並成一個hover事件,還義正言辭的告訴我這是問題的所在(堂堂大前端竟然被后端的教育了,過分),然而我合並之后並沒有什么卵用(啪啪的打臉),我就記得這是hover的不同寫法罷了。好了,不閑扯了,開始說說自己的解決方法:

剛開始我想到的是事件冒泡或者事件捕獲,由於我用的是dom結構是li里面包裹ul,所以就想到了事件捕獲,那就去阻止事件捕獲吧,

e.stopPropagation()
依舊閃,而且並沒有解決。所以不是這個原因,那就從源頭阻止



方法一:延遲誤操作插件-hoverIntent

下載地址:http://www.jq22.com/jquery-info274
這個插件可以很好的解決這種Bug,防止誤操作,兼容各個瀏覽器,包括惡心的IE6,良心推薦


方法二:jq的stop方法

在你的動畫前面加一個stop()即可,我當時項目需要寫的是slideup(),所以應該這樣寫
$("dom").stop(false,false).fadeUp()

  完美解決!!!!




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM