當(dāng)移過元素的子元素時(shí)，mouseout的事件不觸發(fā)

tinna 發(fā)布于2019-08-20 15:51 / 2570人閱讀

摘要：場(chǎng)景在一個(gè)元素上監(jiān)聽了一個(gè)的事件，但是當(dāng)鼠標(biāo)在這個(gè)元素的子元素上移動(dòng)時(shí)，就會(huì)觸發(fā)這個(gè)事件。但是我們希望是在這個(gè)元素內(nèi)活動(dòng)，都是算這個(gè)元素的，并不希望觸發(fā)這個(gè)事件。

場(chǎng)景：
在一個(gè)元素上監(jiān)聽了一個(gè)mouseout的事件，但是當(dāng)鼠標(biāo)在這個(gè)元素的子元素上移動(dòng)時(shí)，就會(huì)觸發(fā)這個(gè)事件。但是我們希望是在這個(gè)元素內(nèi)活動(dòng)，都是算這個(gè)元素的，并不希望觸發(fā)這個(gè)事件。

function onMouseOut(this, event) {
//this is the original element the event handler was assigned to
   var e = event.toElement || event.relatedTarget;

//check for all children levels (checking from bottom up)
while(e && e.parentNode && e.parentNode != window) {
    if (e.parentNode == this||  e == this) {
        if(e.preventDefault) e.preventDefault();
        return false;
    }
    e = e.parentNode;
}

//Do something u need here
}

document.getElementById("parent").addEventListener("mouseout",onMouseOut,true);

這里的關(guān)鍵是判斷event.toElement 和event.relatedTarget的父元素或者更高級(jí)的元素是不是這個(gè)元素，如果不是了，再去實(shí)行這個(gè)函數(shù)。

問題描述

GPU云服務(wù)器云服務(wù)器 js 輸入時(shí)觸發(fā)事件 DOM元素事件不觸發(fā)鼠標(biāo)按下事件 WebRTC源碼offer不觸發(fā)事件

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

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

相關(guān)文章

原生js練習(xí)題---第二課（下）

摘要：最后，我們只要在事件處理程序中獲得這個(gè)布爾值傳給這幾個(gè)函數(shù)就可以了，其中，全選框反選鏈接可以從全選框的屬性獲得這個(gè)值，而全體的復(fù)選框要獲得就得靠遍歷了。 0x1播放列表收縮展開實(shí)現(xiàn)效果值得注意的一個(gè)地方是那個(gè)箭頭，我這里只是用了簡(jiǎn)單的字符串替換，而原題用了背景圖片移動(dòng)來實(shí)現(xiàn)切換箭頭，但是似乎那樣做會(huì)導(dǎo)致整個(gè)容器的左右偏移、效果不是很好。 0x2鼠標(biāo)移過顯示車標(biāo) 實(shí)現(xiàn)效果這題看起來...

Little_XM 2019-08-19 17:51 評(píng)論0 收藏0
實(shí)例解析mouseover,mouseout與mouseenter,mouseleave之間的區(qū)別

摘要：定義在鼠標(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í)例來證明一下這個(gè)兩...

褰辯話 2019-08-23 14:23 評(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)。我們通過排查和，最后只留下，也就是與事件一起觸發(fā)的時(shí)機(jī)。前言原文地址項(xiàng)目地址不知道大家在面試或者工作過程中有沒有被mouseover和mouseenter(對(duì)應(yīng)的是mouseout和mouseleave)事件所困...

王巖威 2019-08-29 12:42 評(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)。我們通過排查和，最后只留下，也就是與事件一起觸發(fā)的時(shí)機(jī)。前言原文地址項(xiàng)目地址不知道大家在面試或者工作過程中有沒有被mouseover和mouseenter(對(duì)應(yīng)的是mouseout和mouseleave)事件所困...

_Dreams 2019-08-20 17:02 評(píng)論0 收藏0
JavaScript 筆記 —— 鼠標(biāo)事件的瀏覽器差異

摘要：本文總結(jié)一下，鼠標(biāo)事件在不同瀏覽器實(shí)現(xiàn)的差異。和相關(guān)元素差異和是級(jí)事件當(dāng)中的其中兩個(gè)事件。標(biāo)準(zhǔn)事件對(duì)象使用屬性來識(shí)別鼠標(biāo)按鍵。該事件當(dāng)中的值與事件對(duì)象當(dāng)中的作用相同。鼠標(biāo)是我們?cè)?PC 端瀏覽網(wǎng)頁時(shí)候最重要的交互工具，因此鼠標(biāo)事件也是 Web 開發(fā)當(dāng)中最常用的一類事件。然而，由于各種原因，不同廠商或者不同版本的瀏覽器之間對(duì)于鼠標(biāo)事件的實(shí)現(xiàn)也有所不同。本文總結(jié)一下，鼠標(biāo)事件在不同瀏覽器...

haoguo 2019-08-21 10:25 評(píng)論0 收藏0