javascript中mouseenter與mouseover的異同點有哪些

 1
 
2

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這個api我們便可以很方便的驗證條件2，接下來我們封裝一個 contains(parent, node) 函數(shù)，專門用來判斷 node 是不是 parent 的子節(jié)點

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ū)別在這里)

這個方法很方便地幫助我們解決了模擬mouseenter事件中的條件2，但是悲催的 ode.contains(otherNode) ,具有瀏覽器兼容性，在一些低級瀏覽器中是不支持的，為了做到兼容我們再來改寫一下contains方法

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é)點
 return result
 }

 if (result) {
 while (node && (node = node.parentNode)) {
  if (parent === node) {
  return true
  }
 }
 }

 return false
}

說了這么多，我們來看看用 mouseover 事件模擬 mouseenter 的最終代碼

// callback表示如果執(zhí)行mouseenter事件時傳入的回調(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事件，但是反過頭來看看

對于ul上添加的mouseover事件來說，relatedTarget只可能是

ul的父元素wrap(移入ul時,此時也是觸發(fā)mouseenter事件的時候, 其實不一定，后面會說明)， 或者ul元素本身(在其子元素上移出時)， 又或者是子元素本身(直接從子元素A移動到子元素B)。

我們通過排查2和3，最后只留下1，也就是mouseenter與mouseover事件一起觸發(fā)的時機。既然這樣我們?yōu)槭裁床幌襁@樣判斷呢？

target.addEventListener('mouseover', function (e) {
 if (e.relatedTarget === this.parentNode) {
 // 執(zhí)行mouseenter的回調(diào)要做的事情 
 }
}, false)

這樣不是更加簡單嗎？，何必要折騰通過排查2和3來做？

原因是，target的父元素有一定的占位空間的時后，我們這樣寫是沒有太大問題的，但是反之，這個時候 e.relatedTarget 就可能是target元素的父元素，又祖先元素中的某一個。我們無法準確判斷e.relatedTarget到底是哪個元素。所以通過排除2和3應(yīng)該是個更好的選擇。

用mouseout模擬mouseleave事件

當(dāng)mouseout被激活時，relatedTarget表示鼠標離開目標元素時，進入了哪個元素，我們同樣可以對relatedTarget的值進行判斷：如果值不是目標元素，也不是目標元素的子元素，就說明鼠標已移出目標元素

我們同樣可以用上面封裝的函數(shù)完成

// callback表示如果執(zhí)行mouseenter事件時傳入的回調(diào)函數(shù)

let emulateEnterOrLeave = function (callback) {
 return function (e) {
 let relatedTarget = e.relatedTarget
 if (relatedTarget !== this && !contains(this, relatedTarget)) {
  callback.apply(this, arguments)
 }
 }
}

以上是“javascript中mouseenter與mouseover的異同點有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！