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

標籤：mouse   自己的   mon   噁心   移動   com   event   font   html   

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()

　　完美解決！！！！

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