當移過元素的子元素時，mouseout的事件不觸發

tinna 發布于2019-08-20 15:51 / 2561人閱讀

摘要：場景在一個元素上監聽了一個的事件，但是當鼠標在這個元素的子元素上移動時，就會觸發這個事件。但是我們希望是在這個元素內活動，都是算這個元素的，并不希望觸發這個事件。

場景：
在一個元素上監聽了一個mouseout的事件，但是當鼠標在這個元素的子元素上移動時，就會觸發這個事件。但是我們希望是在這個元素內活動，都是算這個元素的，并不希望觸發這個事件。

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);

這里的關鍵是判斷event.toElement 和event.relatedTarget的父元素或者更高級的元素是不是這個元素，如果不是了，再去實行這個函數。

問題描述

GPU云服務器云服務器 js 輸入時觸發事件 DOM元素事件不觸發鼠標按下事件 WebRTC源碼offer不觸發事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82533.html

原生js練習題---第二課（下）

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

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

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

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

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

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

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

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

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

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