Zapobiegaj onmouseout podczas najechania na element podrzędny nadrzędnego absolutnego div BEZ jQuery

Mam problem z onmouseoutfunkcją w absolutnie pozycjonowanym div. Gdy mysz uderza w element podrzędny w div, uruchamia się zdarzenie mouseout mouseout, ale nie chcę, aby było uruchamiane, dopóki mysz nie znajdzie się poza nadrzędnym, absolutnym div.

Jak mogę zapobiec mouseouturuchamianiu zdarzenia, gdy trafi ono w element podrzędny BEZ jquery.

Wiem, że ma to coś wspólnego z bulgotaniem wydarzeń, ale nie mam szczęścia, aby dowiedzieć się, jak to rozwiązać.

Znalazłem podobny post tutaj: Jak wyłączyć zdarzenia mouseout wyzwalane przez elementy potomne?

Jednak to rozwiązanie wykorzystuje jQuery.

function onMouseOut(event) {
        //this is the original element the event handler was assigned to
        var e = event.toElement || event.relatedTarget;
        if (e.parentNode == this || e == this) {
           return;
        }
    alert('MouseOut');
    // handle mouse event here!
}



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

Zrobiłem szybkie demo JsFiddle, ze wszystkimi potrzebnymi CSS i HTML, sprawdź to ...

EDYTUJ STAŁE łącze do obsługi wielu przeglądarek http://jsfiddle.net/RH3tA/9/

PAMIĘTAJ, że to sprawdza tylko bezpośredniego rodzica, jeśli nadrzędny element div miał zagnieżdżone dzieci, musisz w jakiś sposób przejść przez elementy, które rodzice szukają „Elementu oryginalnego”

Przykład EDYCJI dla zagnieżdżonych dzieci

EDYCJA Naprawiono, miejmy nadzieję, w różnych przeglądarkach

function makeMouseOutFn(elem){
    var list = traverseChildren(elem);
    return function onMouseOut(event) {
        var e = event.toElement || event.relatedTarget;
        if (!!~list.indexOf(e)) {
            return;
        }
        alert('MouseOut');
        // handle mouse event here!
    };
}

//using closure to cache all child elements
var parent = document.getElementById("parent");
parent.addEventListener('mouseout',makeMouseOutFn(parent),true);

//quick and dirty DFS children traversal, 
function traverseChildren(elem){
    var children = [];
    var q = [];
    q.push(elem);
    while (q.length > 0) {
      var elem = q.pop();
      children.push(elem);
      pushAll(elem.children);
    }
    function pushAll(elemArray){
      for(var i=0; i < elemArray.length; i++) {
        q.push(elemArray[i]);
      }
    }
    return children;
}

I nowy JSFiddle , zaktualizowany link EDIT

Użyj onmouseleave.

Lub w jQuery użyj mouseleave()

To jest dokładnie to, czego szukasz. Przykład:

<div class="outer" onmouseleave="yourFunction()">
    <div class="inner">
    </div>
</div>

lub w jQuery:

$(".outer").mouseleave(function(){
    //your code here
});

przykład jest tutaj .

Aby uzyskać prostsze, czyste rozwiązanie CSS, które działa w niektórych przypadkach ( IE11 lub nowsze ), można usunąć dzieci, pointer-eventsustawiając je nanone

.parent * {
     pointer-events: none;
}

Oto bardziej eleganckie rozwiązanie oparte na tym, co przedstawiono poniżej. odpowiada za zdarzenie kumulujące się z więcej niż jednego poziomu dzieci. Uwzględnia również problemy z różnymi przeglądarkami.

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

Podziękowania dla Amjada Masada, który mnie zainspirował.

Mam następujące rozwiązanie, które wydaje się działać w IE9, FF i Chrome, a kod jest dość krótki (bez złożonego zamknięcia i poprzecznych elementów potomnych):

    DIV.onmouseout=function(e){
        // check and loop relatedTarget.parentNode
        // ignore event triggered mouse overing any child element or leaving itself
        var obj=e.relatedTarget;
        while(obj!=null){
            if(obj==this){
                return;
            }
            obj=obj.parentNode;
        }
        // now perform the actual action you want to do only when mouse is leaving the DIV
    }

zamiast onmouseout użyj onmouseleave.

Nie pokazałeś nam swojego konkretnego kodu, więc nie mogę ci pokazać na twoim konkretnym przykładzie, jak to zrobić.

Ale to jest bardzo proste: po prostu zamień onmouseout na onmouseleave.

To wszystko :) Więc proste :)

Jeśli nie wiesz, jak to zrobić, zobacz wyjaśnienie:

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove_leave_out

Tortowy spokój :) Ciesz się :)

Jeśli używasz jQuery, możesz również użyć funkcji „mouseleave”, która zajmuje się tym wszystkim za Ciebie.

$('#thetargetdiv').mouseenter(do_something);
$('#thetargetdiv').mouseleave(do_something_else);

Funkcja do_something uruchomi się, gdy mysz wejdzie dodargetdiv lub któregokolwiek z jej elementów podrzędnych, funkcja do_something_else uruchomi się tylko wtedy, gdy mysz opuści docelową dystrybucję i którekolwiek z jej elementów podrzędnych.

Myślę, że Quirksmode ma wszystkie potrzebne odpowiedzi (zachowanie bulgotania w różnych przeglądarkach i zdarzenia mouseenter / mouseleave ), ale myślę, że najczęstszym wnioskiem do tego bulgoczącego bałaganu jest użycie frameworka takiego jak JQuery lub Mootools (który ma centrum myszy i zdarzenia mouseleave , które są dokładnie tym, czego się spodziewałeś).

Zobacz, jak oni to robią, jeśli chcesz, zrób to sam
lub możesz stworzyć własną wersję Mootools typu „lean mean” tylko z częścią zdarzenia (i jej zależnościami).

Próbować mouseleave()

Przykład:

<div id="parent" mouseleave="function">
   <div id="child">

   </div>
</div>

;)

Znalazłem bardzo proste rozwiązanie,

po prostu użyj zdarzenia onmouseleave = "myfunc ()" niż zdarzenia onmousout = "myfunc ()"

W moim kodzie zadziałało !!

Przykład:

<html>
<head>
<script type="text/javascript">
   function myFunc(){
      document.getElementById('hide_div').style.display = 'none';
   }
   function ShowFunc(){
      document.getElementById('hide_div').style.display = 'block';
   }
</script>
</head>
<body>
<div onmouseleave="myFunc()" style='border:double;width:50%;height:50%;position:absolute;top:25%;left:25%;'>
   Hover mouse here
   <div id='child_div' style='border:solid;width:25%;height:25%;position:absolute;top:10%;left:10%;'>
      CHILD <br/> It doesn't fires if you hover mouse over this child_div
   </div>
</div>
<div id="hide_div" >TEXT</div>
<a href='#' onclick="ShowFunc()">Show "TEXT"</a>
</body>
</html>

Ten sam przykład z funkcją mouseout:

<html>
<head>
<script type="text/javascript">
   function myFunc(){
      document.getElementById('hide_div').style.display = 'none';
   }
   function ShowFunc(){
      document.getElementById('hide_div').style.display = 'block';
   }
</script>
</head>
<body>
<div onmouseout="myFunc()" style='border:double;width:50%;height:50%;position:absolute;top:25%;left:25%;'>
   Hover mouse here
   <div id='child_div' style='border:solid;width:25%;height:25%;position:absolute;top:10%;left:10%;'>
      CHILD <br/> It fires if you hover mouse over this child_div
   </div>
</div>
<div id="hide_div">TEXT</div>
<a href='#' onclick="ShowFunc()">Show "TEXT"</a>
</body>
</html>

Mam nadzieję, że to pomoże :)

Chociaż rozwiązanie , o którym wspomniałeś, wykorzystuje jquery, mouseenter i mouseleave są natywnymi zdarzeniami dom, więc możesz używać bez jquery.

Istnieją dwa sposoby radzenia sobie z tym.

1) Sprawdź wynik event.target w swoim wywołaniu zwrotnym, aby zobaczyć, czy pasuje do Twojego nadrzędnego div

var g_ParentDiv;

function OnMouseOut(event) {
    if (event.target != g_ParentDiv) {
        return;
    }
    // handle mouse event here!
};


window.onload = function() {
    g_ParentDiv = document.getElementById("parentdiv");
    g_ParentDiv.onmouseout = OnMouseOut;
};

<div id="parentdiv">
    <img src="childimage.jpg" id="childimg" />
</div>

2) Lub użyj przechwytywania zdarzeń i wywołaj event.stopPropagation w funkcji wywołania zwrotnego

var g_ParentDiv;

function OnMouseOut(event) {

    event.stopPropagation(); // don't let the event recurse into children

    // handle mouse event here!
};


window.onload = function() {
    g_ParentDiv = document.getElementById("parentdiv");
    g_ParentDiv.addEventListener("mouseout", OnMouseOut, true); // pass true to enable event capturing so parent gets event callback before children
};

<div id="parentdiv">
    <img src="childimage.jpg" id="childimg" />
</div>

Dzięki temu działa jak urok:

function HideLayer(theEvent){
 var MyDiv=document.getElementById('MyDiv');
 if(MyDiv==(!theEvent?window.event:theEvent.target)){
  MyDiv.style.display='none';
 }
}

Ach, a MyDivtag wygląda tak:

<div id="MyDiv" onmouseout="JavaScript: HideLayer(event);">
 <!-- Here whatever divs, inputs, links, images, anything you want... -->
<div>

W ten sposób, gdy mysz trafia do dziecka, wnuka itp. ... style.display='none'nie zostaje wykonana; ale kiedy onmouseout wychodzi z MyDiv, działa.

Nie ma więc potrzeby zatrzymywania propagacji, używania timerów itp.

Dzięki za przykłady, mógłbym zrobić z nich ten kod.

Mam nadzieję, że to komuś pomoże.

Można również ulepszyć w ten sposób:

function HideLayer(theLayer,theEvent){
 if(theLayer==(!theEvent?window.event:theEvent.target)){
  theLayer.style.display='none';
 }
}

A potem znaczniki DIV, takie jak to:

<div onmouseout="JavaScript: HideLayer(this,event);">
 <!-- Here whatever divs, inputs, links, images, anything you want... -->
<div>

Więc bardziej ogólnie, nie tylko dla jednego div i nie ma potrzeby dodawania id="..."na każdej warstwie.

Jeśli masz dostęp do elementu, do którego zdarzenie jest dołączone wewnątrz mouseoutmetody, możesz użyć, contains()aby sprawdzić, czy event.relatedTargetjest to element podrzędny, czy nie.

Podobnie event.relatedTargetjak element, do którego przeszła mysz, jeśli nie jest to element podrzędny, zostałeś usunięty z elementu.

div.onmouseout = function (event) {
    if (!div.contains(event.relatedTarget)) {
        // moused out of div
    }
}

Na Angular 5, 6 i 7

<div (mouseout)="onMouseOut($event)"
     (mouseenter)="onMouseEnter($event)"></div>

Potem dalej

import {Component,Renderer2} from '@angular/core';
...
@Component({
 selector: 'app-test',
 templateUrl: './test.component.html',
 styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit, OnDestroy {
...
 public targetElement: HTMLElement;

 constructor(private _renderer: Renderer2) {
 }

 ngOnInit(): void {
 }

 ngOnDestroy(): void {
  //Maybe reset the targetElement
 }

 public onMouseEnter(event): void {
  this.targetElement = event.target || event.srcElement;
  console.log('Mouse Enter', this.targetElement);
 }

 public onMouseOut(event): void {
  const elementRelated = event.toElement || event.relatedTarget;
  if (this.targetElement.contains(elementRelated)) {
    return;
  }
  console.log('Mouse Out');
 }
}

Sprawdzam przesunięcie oryginalnego elementu, aby uzyskać współrzędne strony granic elementu, a następnie upewniam się, że akcja przesuwania myszy jest wyzwalana tylko wtedy, gdy wskaźnik myszy znajduje się poza tymi granicami. Brudne, ale działa.

$(el).live('mouseout', function(event){
    while(checkPosition(this, event)){
        console.log("mouseovering including children")
    }
    console.log("moused out of the whole")
})

var checkPosition = function(el, event){
    var position = $(el).offset()
    var height = $(el).height()
    var width = $(el).width()
    if (event.pageY > position.top 
|| event.pageY < (position.top + height) 
|| event.pageX > position.left 
|| event.pageX < (position.left + width)){
    return true
}
}

var elem = $('#some-id');
elem.mouseover(function () {
   // Some code here
}).mouseout(function (event) {
   var e = event.toElement || event.relatedTarget;
   if (elem.has(e).length > 0) return;

   // Some code here
});

Jeśli dodałeś (lub masz) klasę CSS lub identyfikator do elementu nadrzędnego, możesz zrobić coś takiego:

<div id="parent">
  <div>
  </div>
</div>

JavaScript:
document.getElementById("parent").onmouseout = function(e) {
  e = e ? e : window.event //For IE
  if(e.target.id == "parent") {
    //Do your stuff
  }
}

Tak więc rzeczy są wykonywane tylko wtedy, gdy zdarzenie jest w nadrzędnym div.

Chciałem tylko się z tobą czymś podzielić.
Trudno mi było z wydarzeniami ng-mouseenteri ng-mouseleavewydarzeniami.

Studium przypadku:

Stworzyłem pływające menu nawigacyjne, które jest przełączane, gdy kursor znajduje się nad ikoną.
To menu znajdowało się na górze każdej strony.

• Aby obsłużyć wyświetlanie / ukrywanie w menu, przełączam klasę.
  ng-class="{down: vm.isHover}"
• Aby przełączyć vm.isHover , używam zdarzeń myszy ng.
  ng-mouseenter="vm.isHover = true"
ng-mouseleave="vm.isHover = false"

Na razie wszystko było w porządku i działało zgodnie z oczekiwaniami.
Rozwiązanie jest czyste i proste.

Nadchodzący problem:

W konkretnym widoku mam listę elementów.
Dodałem panel akcji, gdy kursor znajduje się nad elementem listy.
Użyłem tego samego kodu co powyżej do obsługi zachowania.

Problem:

Zorientowałem się, że kiedy mój kursor znajduje się w pływającym menu nawigacyjnym, a także na górze elementu, występuje między sobą konflikt.
Pojawił się panel akcji, a pływająca nawigacja została ukryta.

Chodzi o to, że nawet jeśli kursor znajduje się nad pływającym menu nawigacyjnym, uruchamiany jest element listy ng-mouseenter.
Nie ma to dla mnie sensu, bo spodziewałbym się automatycznej przerwy w propagacji myszy.
Muszę powiedzieć, że byłem rozczarowany i spędziłem trochę czasu, aby dowiedzieć się tego problemu.

Pierwsze myśli:

Próbowałem użyć tych:

• $event.stopPropagation()
• $event.stopImmediatePropagation()

Połączyłem wiele zdarzeń wskaźnikowych (mousemove, mouveover, ...), ale żadne mi nie pomogło.

Rozwiązanie CSS:

Znalazłem rozwiązanie z prostą właściwością css, której używam coraz częściej:

pointer-events: none;

Zasadniczo używam tego w ten sposób (na mojej liście elementów):

ng-style="{'pointer-events': vm.isHover ? 'none' : ''}"

W tym trudnym przypadku zdarzenia ng-mouse nie będą już wyzwalane, a moje pływające menu nawigacyjne nie będzie się już zamykać, gdy kursor znajdzie się nad nim i nad elementem z listy.

Iść dalej:

Jak można się spodziewać, to rozwiązanie działa, ale mi się nie podoba.
Nie kontrolujemy naszych wydarzeń i jest źle.
Ponadto musisz mieć dostęp do vm.isHoverlunety, aby to osiągnąć i może to być niemożliwe lub niemożliwe, ale w jakiś sposób brudne.
Mógłbym zrobić skrzypce, gdyby ktoś chciał spojrzeć.

Nie mam jednak innego rozwiązania ...
To długa historia i nie mogę ci dać ziemniaka, więc wybacz mi przyjacielu.
W każdym razie pointer-events: nonejest życie, więc pamiętaj o tym.