国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > 解析JS鼠標(biāo)離開(kāi)事件

解析JS鼠標(biāo)離開(kāi)事件

來(lái)源:千鋒教育
發(fā)布人:xqq
時(shí)間: 2023-11-21 03:17:27 1700507847

一、基本概念

1.1 鼠標(biāo)離開(kāi)事件的定義:

onmouseout事件是鼠標(biāo)移出某個(gè)元素時(shí)觸發(fā),它類(lèi)似于onmouseleave事件,略有不同的是onmouseleave只在鼠標(biāo)離開(kāi)當(dāng)前元素時(shí)觸發(fā),而onmouseout在鼠標(biāo)離開(kāi)當(dāng)前元素時(shí)也會(huì)觸發(fā)。在冒泡階段觸發(fā),即子元素先觸發(fā),然后逐級(jí)向上冒泡,直至document。

1.2 鼠標(biāo)移入移出事件的使用:

如果需要對(duì)某個(gè)元素進(jìn)行鼠標(biāo)移入移出的事件響應(yīng),可以使用onmouseover和onmouseout事件,在這兩個(gè)事件的響應(yīng)函數(shù)中編寫(xiě)相關(guān)代碼。以下是一個(gè)擁有onmouseover和onmouseout事件的div元素,當(dāng)鼠標(biāo)進(jìn)入和離開(kāi)div元素時(shí),分別觸發(fā)不同的事件響應(yīng)函數(shù)。

這是一個(gè)擁有onmouseover和onmouseout事件的div元素。

二、鼠標(biāo)移入移出事件的應(yīng)用

2.1 顯示與隱藏:

onmouseover和onmouseout最常用的應(yīng)用場(chǎng)景就是控制元素的顯示與隱藏。當(dāng)鼠標(biāo)進(jìn)入某個(gè)元素范圍時(shí),觸發(fā)onmouseover事件,然后在這個(gè)事件響應(yīng)函數(shù)中去修改該元素的樣式或者設(shè)置display屬性來(lái)控制元素的顯示;當(dāng)鼠標(biāo)離開(kāi)元素范圍時(shí),觸發(fā)onmouseout事件,將元素隱藏。

顯示/隱藏

2.2 放大鏡效果:

當(dāng)鼠標(biāo)在某個(gè)元素上懸停時(shí),通過(guò)事件響應(yīng)函數(shù)來(lái)動(dòng)態(tài)修改該元素的樣式實(shí)現(xiàn)一個(gè)放大鏡效果。

三、JS鼠標(biāo)移出事件的使用注意事項(xiàng)

3.1 事件冒泡:

onmouseover和onmouseout事件會(huì)觸發(fā)事件冒泡,即子元素的onmouseover和onmouseout事件響應(yīng)函數(shù)會(huì)在其父元素的onmouseover和onmouseout事件響應(yīng)函數(shù)之前執(zhí)行。

3.2 鼠標(biāo)穿透:

當(dāng)鼠標(biāo)從一個(gè)元素滑動(dòng)到另一個(gè)元素時(shí),onmouseover和onmouseout事件會(huì)同時(shí)被觸發(fā)。這會(huì)導(dǎo)致一個(gè)問(wèn)題,即鼠標(biāo)移動(dòng)到下一個(gè)元素上時(shí),留在上一個(gè)元素上的onmouseout事件可能還沒(méi)有執(zhí)行完畢,這時(shí)鼠標(biāo)已經(jīng)進(jìn)入了下一個(gè)元素的范圍,如果在下一個(gè)元素上也設(shè)置了onmouseover事件響應(yīng)函數(shù),那么在上一個(gè)元素上的onmouseout事件和下一個(gè)元素上的onmouseover事件會(huì)同時(shí)被觸發(fā),導(dǎo)致不期望的結(jié)果。

3.3 懸停問(wèn)題:

感官上的誤解很容易導(dǎo)致我們寫(xiě)出一些奇怪的onmouseover和onmouseout事件響應(yīng)函數(shù)。例如,當(dāng)我們?cè)噲D將鼠標(biāo)移到元素的子元素上時(shí),這可能觸發(fā)onmouseout事件,導(dǎo)致元素顯然不再懸停于鼠標(biāo)下。這時(shí),如果我們需要在元素的子元素上放置一些內(nèi)容,可能會(huì)意外地在某個(gè)時(shí)刻使元素失去了懸停狀態(tài)。

四、JS代碼示例



  
    JS鼠標(biāo)離開(kāi)事件示例
  
  
    
顯示/隱藏

五、總結(jié)

鼠標(biāo)離開(kāi)事件是JS中一個(gè)非常常用的事件,在網(wǎng)頁(yè)開(kāi)發(fā)中被廣泛應(yīng)用。在應(yīng)用過(guò)程中,需要注意事件冒泡、鼠標(biāo)穿透和懸停等問(wèn)題,避免出現(xiàn)不期望的結(jié)果。準(zhǔn)確理解和熟練掌握這一JS基礎(chǔ)知識(shí),有助于開(kāi)發(fā)人員更加高效地完成開(kāi)發(fā)任務(wù)。

聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專(zhuān)屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT