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

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

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

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

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的父元素或者更高級的元素是不是這個元素，如果不是了，再去實行這個函數(shù)。

問題描述

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/82533.html

相關(guān)文章

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

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

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

摘要：定義在鼠標(biāo)光標(biāo)從元素外部首次移動到元素范圍之內(nèi)時觸發(fā)，這個事件不冒泡。又移入的另一個元素可能位于前一個元素的外部，也可能是該元素的子元素。前言 ?我們都知道js提供了鼠標(biāo)事件，而鼠標(biāo)事件中包含了兩對事件，即mouseover和mouseout以及mouseenter和mouseleave這兩對事件，如果只是單純的讀紅寶書上的文字可能體會不到他們的差別，現(xiàn)在我們就用實例來證明一下這個兩...

褰辯話 2019-08-23 14:23 評論0 收藏0
mouseenter與mouseover為何這般糾纏不清？

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

王巖威 2019-08-29 12:42 評論0 收藏0
mouseenter與mouseover為何這般糾纏不清？

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

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

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

haoguo 2019-08-21 10:25 評論0 收藏0