成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

實(shí)例解析mouseover,mouseout與mouseenter,mouseleave之間的區(qū)別

褰辯話 / 2192人閱讀

摘要：定義在鼠標(biāo)光標(biāo)從元素外部首次移動(dòng)到元素范圍之內(nèi)時(shí)觸發(fā)，這個(gè)事件不冒泡。又移入的另一個(gè)元素可能位于前一個(gè)元素的外部，也可能是該元素的子元素。

前言 
?我們都知道js提供了鼠標(biāo)事件，而鼠標(biāo)事件中包含了兩對(duì)事件，即mouseover和mouseout以及mouseenter和mouseleave這兩對(duì)事件，如果只是單純的讀紅寶書上的文字可能體會(huì)不到他們的差別，現(xiàn)在我們就用實(shí)例來(lái)證明一下這個(gè)兩組事件的差別。
定義 mouseenter

?在鼠標(biāo)光標(biāo)從元素外部首次移動(dòng)到元素范圍之內(nèi)時(shí)觸發(fā)，這個(gè)事件不冒泡。

mouseleave

?在位于元素上方的鼠標(biāo)光標(biāo)移動(dòng)到元素范圍之外時(shí)觸發(fā)，這個(gè)事件不冒泡。

mouseover

?在鼠標(biāo)指針位于一個(gè)元素外部，然后用戶將其首次移入另一個(gè)元素邊界之內(nèi)時(shí)觸發(fā)。

mouseout

?在鼠標(biāo)指針位于一個(gè)元素上方，然后用戶將其移入另一個(gè)元素時(shí)觸發(fā)。又移入的另一個(gè)元素可能位于前一個(gè)元素的外部，也可能是該元素的子元素。

實(shí)例

?先放上整段代碼，可以參考一下：


    
父元素
        
子元素

?操作的動(dòng)圖是這樣的：（括號(hào)中數(shù)字是表示觸發(fā)的次數(shù)）

第一步：鼠標(biāo)進(jìn)入父元素，同時(shí)觸發(fā)mouseenter（1）和mouseover（1）

第二步：鼠標(biāo)進(jìn)入子元素，同時(shí)觸發(fā)mouseover（2）和mouseout（1）

第三步：鼠標(biāo)離開子元素，同時(shí)觸發(fā)mouseout（2）和mouseover（3）

第四步：鼠標(biāo)離開父元素，同時(shí)觸發(fā)mouseout（3）和mouseleave（1）

總結(jié)

?根據(jù)上面的操作，我們可以總結(jié)出以下結(jié)論：

mouseenter和mouseleave只有離開該元素時(shí)才會(huì)觸發(fā)，如果有子元素的話，鼠標(biāo)移入子元素，還算是在該元素中，所以不會(huì)觸發(fā)；

mouseover和mouseout是只要有進(jìn)入和離開就會(huì)出觸發(fā)，無(wú)論是從父元素到子元素還是子元素到父元素，或者是只對(duì)父元素進(jìn)行操作（換句話說(shuō)，會(huì)觸發(fā)mouseenter和mouseleave的時(shí)候一定會(huì)觸發(fā)mouseover和mouseout）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100524.html

相關(guān)文章

  • mouseenter與mouseover為何這般糾纏不清？

    摘要：而當(dāng)鼠標(biāo)本身在元素邊界內(nèi)時(shí)，要觸發(fā)該事件，必須先將鼠標(biāo)移出元素邊界外，再次移入才能觸發(fā)。造成以上現(xiàn)象本質(zhì)上是事件不支持冒泡所致。事件屬性返回與事件的目標(biāo)節(jié)點(diǎn)相關(guān)的節(jié)點(diǎn)。我們通過(guò)排查和，最后只留下，也就是與事件一起觸發(fā)的時(shí)機(jī)。 前言 原文地址 項(xiàng)目地址 不知道大家在面試或者工作過(guò)程中有沒有被mouseover和mouseenter(對(duì)應(yīng)的是mouseout和mouseleave)事件所困...

    王巖威 評(píng)論0 收藏0

  • mouseenter與mouseover為何這般糾纏不清？

    摘要：而當(dāng)鼠標(biāo)本身在元素邊界內(nèi)時(shí)，要觸發(fā)該事件，必須先將鼠標(biāo)移出元素邊界外，再次移入才能觸發(fā)。造成以上現(xiàn)象本質(zhì)上是事件不支持冒泡所致。事件屬性返回與事件的目標(biāo)節(jié)點(diǎn)相關(guān)的節(jié)點(diǎn)。我們通過(guò)排查和，最后只留下，也就是與事件一起觸發(fā)的時(shí)機(jī)。 前言 原文地址 項(xiàng)目地址 不知道大家在面試或者工作過(guò)程中有沒有被mouseover和mouseenter(對(duì)應(yīng)的是mouseout和mouseleave)事件所困...

    _Dreams 評(píng)論0 收藏0

  • jQuery入門筆記之（三）事件詳解

    摘要：可以傳遞三個(gè)參數(shù)表示一個(gè)或多個(gè)事件類型，比如。表示綁定到指定元素的處理函數(shù)。我們稱它為簡(jiǎn)寫事件。必須在中，并且使用作為事件觸發(fā)元素，不然無(wú)效。和表示鼠標(biāo)移入和移出的時(shí)候觸發(fā)。按下返回按下返回和分別表示光標(biāo)激活和丟失，事件觸發(fā)時(shí)機(jī)是當(dāng)前元素。 轉(zhuǎn)自個(gè)人博客 在JavaScript 有一個(gè)非常重要的功能，就是事件驅(qū)動(dòng)。如果你的網(wǎng)頁(yè)需要與用戶進(jìn)行交互的話，就不可能不用到事件。它在頁(yè)面完全加...

    GitCafe 評(píng)論0 收藏0

  • jQuery 事件(一) 鼠標(biāo)與鍵盤事件

    jQuery 鼠標(biāo)事件 click與dbclick事件 用交互操作中，最簡(jiǎn)單直接的操作就是點(diǎn)擊操作。jQuery提供了兩個(gè)方法一個(gè)是click方法用于監(jiān)聽用戶單擊操作，另一個(gè)方法是dbclick方法用于監(jiān)聽用戶雙擊操作。這兩個(gè)方法的用法是類似的，下面以click()事件為例 方法一：$ele.click() 綁定$ele元素，不帶任何參數(shù)一般是用來(lái)指定觸發(fā)一個(gè)事件，用的比較少 點(diǎn)擊觸發(fā) $(ele...

    Gemini 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<