JQuery中使用mouseover事件和mouseout事件作用在同一個元素上時出現閃爍現象
阿新 • • 發佈:2019-01-01
前提:實現一個電影網站中的關於選定圖片出現一個新的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]);(千萬別忘了這個分號,養成好習慣!)