javascript中mouseenter與mouseover的異同
不知道大家在面試或者工作過程中有沒有被 mouseover
和 mouseenter
(對(duì)應(yīng)的是 mouseout
和 mouseleave
)事件所困擾。自己之前在面試的時(shí)候就有被問到諸如mouseover和mouseenter事件的異同之類的問題?當(dāng)時(shí)沒有答出來,一直也對(duì)這兩個(gè)事件有點(diǎn)模糊不清,趁著最近正在讀 zepto源碼 ,準(zhǔn)備寫一篇這方面的文章,如果有錯(cuò)誤,請(qǐng)大家指正。
mouseenter與mouseover的異同?
要說清楚mouseenter與mouseover有什么不同,也許可以從兩方面去講。
是否支持冒泡 事件的觸發(fā)時(shí)機(jī)
先來看一張圖,對(duì)這兩個(gè)事件有一個(gè)簡(jiǎn)單直觀的感受。
再看看官網(wǎng)對(duì)mouseenter的解釋
mouseenter | onmouseenter event
The event fires only if the mouse pointer is outside the boundaries of the object and the user moves the mouse pointer inside the boundaries of the object. If the mouse pointer is currently inside the boundaries of the object, for the event to fire, the user must move the mouse pointer outside the boundaries of the object and then back inside the boundaries of the object.
大概意思是說:當(dāng)鼠標(biāo)從元素的邊界之外移入元素的邊界之內(nèi)時(shí),事件被觸發(fā)。而當(dāng)鼠標(biāo)本身在元素邊界內(nèi)時(shí),要觸發(fā)該事件,必須先將鼠標(biāo)移出元素邊界外,再次移入才能觸發(fā)。(英語比較渣:no_mouth:,湊合看哈)
Unlike the onmouseover event, the onmouseenter event does not bubble.
大概意思是:和mouseover不同的是,mouseenter不支持事件冒泡 (英語比較渣:no_mouth:,湊合看哈)
由于mouseenter不支持事件冒泡,導(dǎo)致在一個(gè)元素的子元素上進(jìn)入或離開的時(shí)候會(huì)觸發(fā)其mouseover和mouseout事件,但是卻不會(huì)觸發(fā)mouseenter和mouseleave事件
我們用一張動(dòng)圖來看看他們的區(qū)別(或者點(diǎn)擊該鏈接體驗(yàn))。
我們給左右兩邊的ul分別添加了 mouseover
和 mouseenter
事件,當(dāng)鼠標(biāo)進(jìn)入左右兩邊的ul時(shí), mouseover
和 mouseenter
事件都觸發(fā)了,但是當(dāng)移入各自的子元素li的時(shí)候,觸發(fā)了左邊ul上的mouseover事件,然而右邊ul的mouseenter事件沒有被觸發(fā)。
造成以上現(xiàn)象本質(zhì)上是 mouseenter
事件不支持冒泡所致。
如何模擬mouseenter事件。
可見mouseover事件因其具有冒泡的性質(zhì),在子元素內(nèi)移動(dòng)的時(shí)候,頻繁被觸發(fā),如果我們不希望如此,可以使用mouseenter事件代替之,但是早期只有ie瀏覽器支持該事件,雖然現(xiàn)在大多數(shù)高級(jí)瀏覽器都支持了mouseenter事件,但是難免會(huì)有些兼容問題,所以如果可以自己手動(dòng)模擬,那就太好了。
關(guān)鍵因素: relatedTarget 要想手動(dòng)模擬mouseenter事件,需要對(duì)mouseover事件觸發(fā)時(shí)的事件對(duì)象event屬性relatedTarget了解。
relatedTarget事件屬性返回與事件的目標(biāo)節(jié)點(diǎn)相關(guān)的節(jié)點(diǎn)。 對(duì)于mouseover事件來說,該屬性是鼠標(biāo)指針移到目標(biāo)節(jié)點(diǎn)上時(shí)所離開的那個(gè)節(jié)點(diǎn)。 對(duì)于mouseout事件來說,該屬性是離開目標(biāo)時(shí),鼠標(biāo)指針進(jìn)入的節(jié)點(diǎn)。 對(duì)于其他類型的事件來說,這個(gè)屬性沒有用。
重新回顧一下文章最初的那張圖,根據(jù)上面的解釋,對(duì)于ul上添加的mouseover事件來說,relatedTarget只可能是
ul的父元素wrap(移入ul時(shí),此時(shí)也是觸發(fā)mouseenter事件的時(shí)候, 其實(shí)不一定,后面會(huì)說明 ), 或者ul元素本身(在其子元素上移出時(shí)), 又或者是子元素本身(直接從子元素A移動(dòng)到子元素B)。
根據(jù)上面的描述,我們可以對(duì)relatedTarget的值進(jìn)行判斷:如果值不是目標(biāo)元素,也不是目標(biāo)元素的子元素,就說明鼠標(biāo)已移入目標(biāo)元素而不是在元素內(nèi)部移動(dòng)。
條件1: 不是目標(biāo)元素 很好判斷 e.relatedTarget !== target(目標(biāo)元素)
條件2:不是目標(biāo)元素的子元素,這個(gè)應(yīng)該怎么判斷呢?
ele.contains
這里需要介紹一個(gè)新的api node.contains(otherNode) , 表示傳入的節(jié)點(diǎn)是否為該節(jié)點(diǎn)的后代節(jié)點(diǎn), 如果 otherNode 是 node 的后代節(jié)點(diǎn)或是 node 節(jié)點(diǎn)本身.則返回true , 否則返回 false
用法案例
<ul class="list"> <li class="item">1</li> <li>2</li> </ul> <div class="test"></div>
let $list = document.querySelector('.list') let $item = document.querySelector('.item') let $test = document.querySelector('.test') $list.contains($item) // true $list.contains($test) // false $list.contains($list) // true
那么利用contains這個(gè)api我們便可以很方便的驗(yàn)證條件2,接下來我們封裝一個(gè) contains(parent, node)
函數(shù),專門用來判斷 node
是不是 parent
的子節(jié)點(diǎn)
let contains = function (parent, node) { return parent !== node && parent.contains(node) }
用我們封裝過后的 contains
函數(shù)再去試試上面的例子
contains($list, $item) // true contains($list, $test) // false contains($list, $list) // false (主要區(qū)別在這里)
這個(gè)方法很方便地幫助我們解決了模擬mouseenter事件中的條件2,但是悲催的 ode.contains(otherNode)
,具有瀏覽器兼容性,在一些低級(jí)瀏覽器中是不支持的,為了做到兼容我們?cè)賮砀膶懸幌耤ontains方法
let contains = docEle.contains ? function (parent, node) { return parent !== node && parent.contains(node) } : function (parent, node) { let result = parent !== node if (!result) { // 排除parent與node傳入相同的節(jié)點(diǎn) return result } if (result) { while (node && (node = node.parentNode)) { if (parent === node) { return true } } } return false }
說了這么多,我們來看看用 mouseover
事件模擬 mouseenter
的最終代碼
// callback表示如果執(zhí)行mouseenter事件時(shí)傳入的回調(diào)函數(shù) let emulateEnterOrLeave = function (callback) { return function (e) { let relatedTarget = e.relatedTarget if (relatedTarget !== this && !contains(this, relatedTarget)) { callback.apply(this, arguments) } } }
好了,我們已經(jīng)通過mouseove事件完整的模擬了mouseenter事件,但是反過頭來看看
對(duì)于ul上添加的mouseover事件來說,relatedTarget只可能是
ul的父元素wrap(移入ul時(shí),此時(shí)也是觸發(fā)mouseenter事件的時(shí)候, 其實(shí)不一定,后面會(huì)說明 ), 或者ul元素本身(在其子元素上移出時(shí)), 又或者是子元素本身(直接從子元素A移動(dòng)到子元素B)。
我們通過排查2和3,最后只留下1,也就是mouseenter與mouseover事件一起觸發(fā)的時(shí)機(jī)。既然這樣我們?yōu)槭裁床幌襁@樣判斷呢?
target.addEventListener('mouseover', function (e) { if (e.relatedTarget === this.parentNode) { // 執(zhí)行mouseenter的回調(diào)要做的事情 } }, false)
這樣不是更加簡(jiǎn)單嗎?,何必要折騰通過排查2和3來做?
原因是,target的父元素有一定的占位空間的時(shí)后,我們這樣寫是沒有太大問題的,但是反之,這個(gè)時(shí)候 e.relatedTarget
就可能是target元素的父元素,又祖先元素中的某一個(gè)。我們無法準(zhǔn)確判斷e.relatedTarget到底是哪個(gè)元素。所以通過排除2和3應(yīng)該是個(gè)更好的選擇。
用mouseout模擬mouseleave事件
當(dāng)mouseout被激活時(shí),relatedTarget表示鼠標(biāo)離開目標(biāo)元素時(shí),進(jìn)入了哪個(gè)元素,我們同樣可以對(duì)relatedTarget的值進(jìn)行判斷:如果值不是目標(biāo)元素,也不是目標(biāo)元素的子元素,就說明鼠標(biāo)已移出目標(biāo)元素
我們同樣可以用上面封裝的函數(shù)完成
// callback表示如果執(zhí)行mouseenter事件時(shí)傳入的回調(diào)函數(shù) let emulateEnterOrLeave = function (callback) { return function (e) { let relatedTarget = e.relatedTarget if (relatedTarget !== this && !contains(this, relatedTarget)) { callback.apply(this, arguments) } } }
結(jié)尾
文中也許有些觀點(diǎn)不夠嚴(yán)謹(jǐn),歡迎大家拍磚。
- 淺談JQ中mouseover和mouseenter的區(qū)別
- 關(guān)于事件mouseover ,mouseout ,mouseenter,mouseleave的區(qū)別
- 快速移動(dòng)鼠標(biāo)觸發(fā)問題及解決方法(ECharts外部調(diào)用保存為圖片操作及工作流接線mouseenter和mouseleave)
- Jquery利用mouseenter和mouseleave實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出層且可以點(diǎn)擊
- 為非IE瀏覽器添加mouseenter,mouseleave事件的實(shí)現(xiàn)代碼
- 跨瀏覽器的 mouseenter mouseleave 以及 compareDocumentPosition的使用說明
- javascript 兼容FF的onmouseenter和onmouseleave的代碼
相關(guān)文章
javascript將數(shù)組插入到另一個(gè)數(shù)組中的代碼
下面的代碼主要功能就是將數(shù)組arr2插入到數(shù)組arr1的index位置,需要的朋友可以參考下2013-01-01JavaScript生成隨機(jī)驗(yàn)證碼代碼實(shí)例
這篇文章主要介紹了JavaScript生成隨機(jī)驗(yàn)證碼代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記四:Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)鏈?zhǔn)秸{(diào)用實(shí)例分析
這篇文章主要介紹了Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)鏈?zhǔn)秸{(diào)用,結(jié)合實(shí)例形式分析了《javascript設(shè)計(jì)模式》中鏈?zhǔn)秸{(diào)用的原理與簡(jiǎn)單使用技巧,需要的朋友可以參考下2020-04-04js創(chuàng)建數(shù)組的簡(jiǎn)單方法
下面小編就為大家?guī)硪黄狫S創(chuàng)建數(shù)組的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07js實(shí)現(xiàn)定時(shí)進(jìn)度條完成后切換圖片
這篇文章主要介紹了js實(shí)現(xiàn)定時(shí)進(jìn)度條,進(jìn)度100%以后可以切換圖片,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01javascript 靜態(tài)對(duì)象和構(gòu)造函數(shù)的使用和公私問題
靜態(tài)對(duì)象和構(gòu)造函數(shù)的使用區(qū)別 平常我們會(huì)經(jīng)常使用JSON形式,或者var obj=function(){}亦或function(){}這么幾種對(duì)象的構(gòu)建辦法,有時(shí)會(huì)認(rèn)為這是等價(jià)的辦法,然而他們還有不同。2010-03-03用javascript實(shí)現(xiàn)截取字符串包含中文處理的函數(shù)
一直不知道js可以截取中文字符,呵呵,原理用正則表達(dá)式,匹配中文的長度,中文算兩個(gè),因?yàn)樗阋粋€(gè),是個(gè)好東西,推薦大家收藏2008-04-04