Mouseover und Mouseout werden mehrfach ausgelöst

Lesezeit: 3 Minuten

Benutzeravatar von user1186050
Benutzer1186050

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>

Terrys Benutzeravatar
Frottee

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

  • Gibt es eine Möglichkeit, die Trigger in den Ereignissen zurückzusetzen, da sie nicht zu funktionieren scheinen, nachdem ich die Seite mit einem Ajax aktualisiert und diese beiden Ereignisse neu geladen habe

    – Benutzer1186050

    14. Januar 2017 um 0:18 Uhr


  • @ user1186050 Das gehört wahrscheinlich zu einer anderen Frage. Ich kann jedoch sehen, dass Sie die Ereignisse an das Dokumentelement binden, was kein Problem sein sollte. Ich kann allein auf der Grundlage dieser Informationen keine Fehlerbehebung durchführen, Sie müssen zu diesem Zweck einen MCVE bereitstellen.

    – Frottee

    14. Januar 2017 um 0:20 Uhr

  • MTier, cBeton, und verifizierbar eBeispiel.

    – Frottee

    14. Januar 2017 um 0:30 Uhr

  • Terry, ich habe die Frage hier gepostet stackoverflow.com/questions/41645224/…

    – Benutzer1186050

    14. Januar 2017 um 0:31 Uhr

  • Ich verwende mouseenter und mouseleave, aber es wird in Datentabellenzeilen mehrmals ausgelöst …

    – Rahul Sonwanshi

    26. Januar 2021 um 10:50 Uhr

1431210cookie-checkMouseover und Mouseout werden mehrfach ausgelöst

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy