Mouseover und Mouseout werden mehrfach ausgelöst

Ich habe diese beiden bei Mouseover- und Mouseout-Ereignissen in JS. Sie dienen dazu, zu überprüfen, ob ich mit der Maus über ein Panel auf meiner Seite fahre. Aber das Problem ist, wenn ich über ein Panel schwebe, wird es ausgelöst (gut), aber wenn ich dann über ein anderes Element innerhalb dieses Panels fahre, löst es ein Mouseout-Ereignis aus und dann erneut die Mouseover-Ereignisse, wenn ich mich zu einem anderen Teil innerhalb des Panels bewege.

Ich möchte, dass die Mouseover- und Mouseout-Ereignisse nur einmal ausgelöst werden! Einmal zum Betreten des Panels, ein weiteres Mal zum Verlassen. Gibt es eine Möglichkeit, den Aufruf on mouseover an alle untergeordneten Elemente im div.panel weiterzugeben. Es scheint, als würde es korrigiert werden.

Hier sind meine Veranstaltungen

$(document).off("mouseover").on("mouseover", "div.panel", function() {
   var panelSpaceId = $(this).attr("data-spaceId");
   var marker = _.find(scope.markers, function(item) {
     return item.spaceId == panelSpaceId
   })
   google.maps.event.trigger(marker, "mouseover");
   console.log("over" + marker.spaceId);
 });

 $(document).off("mouseout").on("mouseout", "div.panel", function() {
   var panelSpaceId = $(this).attr("data-spaceId");
   var marker = _.find(scope.markers, function(item) {
     return item.spaceId == panelSpaceId
   })
   google.maps.event.trigger(marker, "mouseout");
   console.log("out" + marker.spaceId);
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Sie können dieses Problem vermeiden, indem Sie verwenden mouseenter Anstatt von mouseoverund mouseleave Anstatt von mouseout. Der Grund ist einfach: mouseenter wird nur ausgelöst, wenn der Cursor in das Element “eintritt”, das seine untergeordneten Elemente enthält. Wenn Sie also den Mauszeiger über das untergeordnete Element des Elements bewegen, wird das nicht erneut ausgelöst mouseenter Veranstaltung.

Diese ähnliche Logik gilt für mouseleave gegen von mouseout. Sie können diesen Effekt beobachten basierend auf einer Geige erstellt von @gilly3 in seiner Antwort auf eine ähnliche Frage. Ich markiere Ihre Frage nicht als doppelt, da Ihre Antwort in erster Linie die Fehlerbehebung betrifft mouseover/leave Ereignisse statt nach dem Unterschied zwischen zu fragen mouseover/enter und mouseout/leave.

Es ist hilfreich, sich Folgendes vorzustellen:

• eintreten bedeutet, wenn Ihr Cursor die Grenzen des Elements betritt. Selbst wenn Sie sich in einem untergeordneten Knoten befinden, sind Sie immer noch da innerhalb der Grenzendaher wird es nie mehrfach ausgelöst.
• (h)übergehen kann so visualisiert werden, dass Sie Ihr Element auf einer Leinwand sehen. Wenn das Element, über dem sich der Cursor befindet, auf dem Bildschirm sichtbar ist, wird die Mouseover Ereignis ausgelöst wird. Der Cursor ist nicht mehr Über das übergeordnete Element, wenn sich der Cursor bewegt Über das untergeordnete Element, daher wird das Ereignis immer wieder ausgelöst, wenn Sie hin und her gehen.

Hier ist Ihr modifizierter Code, in dem ich einfach die anstößigen Ereignisse durch die richtigen ersetzt habe:

$(document).off("mouseenter").on("mouseenter", "div.panel", function() {
  var panelSpaceId = $(this).attr("data-spaceId");
  var marker = _.find(scope.markers, function(item) {
    return item.spaceId == panelSpaceId
  })
  google.maps.event.trigger(marker, "mouseenter");
  console.log("over" + marker.spaceId);
});

$(document).off("mouseleave").on("mouseleave", "div.panel", function() {
  var panelSpaceId = $(this).attr("data-spaceId");
  var marker = _.find(scope.markers, function(item) {
    return item.spaceId == panelSpaceId
  })
  google.maps.event.trigger(marker, "mouseleave");
  console.log("out" + marker.spaceId);
});