1. 程式人生 > >JQuery中使用mouseover事件和mouseout事件作用在同一個元素上時出現閃爍現象

JQuery中使用mouseover事件和mouseout事件作用在同一個元素上時出現閃爍現象

前提:實現一個電影網站中的關於選定圖片出現一個新的div容器展示具體電影詳情的功能(通過使用visibility屬性隱藏一個div並顯示另一個div)

操作:我把mouseover事件和mouseout事件作用到一個div容器時,整個div出現了閃爍的現象,

原因:糾結了很久,才發現了一個問題,沒考慮瀏覽器的冒泡行為

        冒泡行為:所謂冒泡行為,通俗的說是說某個元素觸發了一個事件後,這個事件後相繼在它的所有組元素上再次觸發,並且這個事件從原始元素開始一直冒泡到DOM樹的最上層

        舉個例子,有如下關係A->B->C->D

        A是老祖宗,B是爺爺,C是爸爸,D是兒子,(也就是我。。。)

        這時D觸發了一個按鈕,比如給C(爸爸)買了一塊表,這之後,C(爸爸)又會再執行這個按鈕事件,又給B(爺爺)買了一塊表,然後B(爺爺)同樣如此,給A(老祖宗)也買了一塊表。。(孝心槓槓的!!)

解決:

對於解決這個問題,我沒有具體考慮,而是換了一個思路完成了同樣的功能,通過百度,看到了一個大佬是真正解決了這個問題:div 內部元素出發 mouseout 和mouseover 事件解決

        我使用了另一個事件繫結的方法:hover()方法(用於模擬滑鼠懸停事件,當滑鼠懸停在某元素上時觸發第一個函式,滑鼠溢位時觸發第二個函式),語法格式如下 

hover(overFn,[outFn]);(千萬別忘了這個分號,養成好習慣!)