it-swarm.com.de

Wie deaktiviere ich Mouseout-Ereignisse, die von untergeordneten Elementen ausgelöst werden?

Lassen Sie mich das Problem im Detail beschreiben:

Ich möchte ein absolut positioniertes Div anzeigen, wenn ich den Mauszeiger über ein Element halte. Mit jQuery ist das ganz einfach und funktioniert einwandfrei. Wenn die Maus jedoch über eines der untergeordneten Elemente fährt, wird das mouseout -Ereignis des enthaltenden div ausgelöst. Wie verhindere ich, dass Javascript das mouseout-Ereignis des enthaltenden Elements auslöst, wenn ich den Mauszeiger über ein untergeordnetes Element bewege?.

Was ist der beste und kürzeste Weg, dies mit jQuery zu tun?

Hier ist ein vereinfachtes Beispiel, um zu veranschaulichen, was ich meine:

HTML:

<a>Hover Me</a>
<div>
  <input>Test</input>
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

Javascript/jQuery:

$('a').hover( function() { $(this).next().show() }
              function() { $(this).next().hide() } );
102
Sander Versluys

Die Frage ist ein bisschen alt, aber ich bin neulich darauf gestoßen.

Die einfachste Möglichkeit, dies mit neueren Versionen von jQuery zu tun, besteht darin, die Ereignisse mouseenter und mouseleave anstelle von mouseover und mouseout zu verwenden.

Sie können das Verhalten schnell testen mit:

$(".myClass").on( {
   'mouseenter':function() { console.log("enter"); },
   'mouseleave':function() { console.log("leave"); }
});
204
bytebrite

Der Einfachheit halber würde ich den HTML-Code nur ein wenig umorganisieren, um den neu angezeigten Inhalt in das Element zu setzen, an das das Mouseover-Ereignis gebunden ist:

<div id="hoverable">
  <a>Hover Me</a>
  <div style="display:none;">
    <input>Test</input>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
</div>

Dann könnten Sie so etwas tun:

$('#hoverable').hover( function() { $(this).find("div").show(); },
                       function() { $(this).find("div").hide(); } );

Anmerkung: Ich empfehle kein Inline-CSS, aber es wurde gemacht, um das Beispiel leichter zu verdauen.

18
Ryan McGeary

Yeap, Leute, benutze .mouseleave Anstatt von .mouseout:

$('div.sort-selector').mouseleave(function() {
    $(this).hide();
});

Oder verwenden Sie es sogar in Kombination mit live:

$('div.sort-selector').live('mouseleave', function() {
    $(this).hide();
});
9
Lord Nighton

Sie suchen nach dem jQuery-Äquivalent von Javascript, um das Auftreten von Ereignissen zu verhindern.

Überprüfen Sie dies heraus:

http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29

Grundsätzlich müssen Sie das Ereignis in den untergeordneten DOM-Knoten abfangen und dort deren Weitergabe im DOM-Baum stoppen. Eine andere Möglichkeit, die nicht unbedingt empfohlen wird (da sie die vorhandenen Ereignisse auf Ihrer Seite erheblich beeinträchtigen kann), besteht darin, die Ereigniserfassung auf ein bestimmtes Element auf der Seite festzulegen und alle Ereignisse zu empfangen. Dies ist nützlich für DnD-Verhalten und dergleichen, aber definitiv nicht für Ihren Fall.

8
Yuval Adam

Ich überprüfe einfach, ob die Mauskoordinaten außerhalb des Elements im mouseout-Ereignis liegen.

Es funktioniert, aber es ist eine Menge Code für so eine einfache Sache :(

function mouseOut(e)
{
    var pos = GetMousePositionInElement(e, element);
    if (pos.x < 0 || pos.x >= element.size.X || pos.y < 0 || pos.y >= element.size.Y)
    {
        RealMouseOut();
    }
    else
    {
         //Hit a child-element
    }
}

Code aus Gründen der Lesbarkeit gekürzt, funktioniert nicht sofort.

3
balooo

Ich habe dieses Problem gelöst, indem ich pointer-events: none; auf meinem Kind Elemente CSS

1
Antoine

Ich stimme Ryan zu.

Ihr Problem ist, dass das "nächste" div kein "untergeordnetes" Element von A ist. HTML oder jQuery können nicht erkennen, dass Ihr "a" -Element mit dem untergeordneten div im DOM zusammenhängt. Wenn Sie sie einwickeln und den Schwebeflug auf die Hülle legen, bedeutet dies, dass sie miteinander verbunden sind.

Bitte beachten Sie, dass sein Code nicht den Best Practices entspricht. Setzen Sie den verborgenen Stil nicht inline auf die Elemente. Wenn der Benutzer über CSS, aber kein Javascript verfügt, wird das Element ausgeblendet und kann nicht angezeigt werden. Besser ist es, diese Erklärung in das document.ready-Ereignis aufzunehmen.

1
user37731

Wie ich normalerweise gesehen habe, dauert es ungefähr eine halbe Sekunde, bis die Maus vom HoverMe-Element wegbewegt wird. Wenn Sie die Maus in das schwebende Element bewegen, möchten Sie eine Variable festlegen, die signalisiert, dass Sie sich über dem Element befinden, und dann verhindern, dass der schwebende Teil ausgeblendet wird, wenn diese Variable festgelegt ist. Sie müssen dann eine ähnliche Ausblendfunktion OnMouseOut für das schwebende Element hinzufügen, damit es beim Entfernen der Maus ausgeblendet wird. Tut mir leid, dass ich Ihnen keinen Code oder etwas Konkretes geben kann, aber ich hoffe, dass dies Sie in die richtige Richtung weist.

0
Kibbee

Es ist eine alte Frage, aber sie wird niemals überholt. Die richtige Antwort sollte die von bytebrite gegebene sein.

Ich möchte nur auf den Unterschied zwischen mouseover/mouseout und mouseenter/mouseleave hinweisen. Sie können eine großartige und hilfreiche Erklärung lesen hier (eine funktionierende Demo finden Sie ganz unten auf der Seite). Wenn Sie mouseout verwenden, wird das Ereignis beendet, wenn die Maus in ein anderes Element eintritt, auch wenn es sich um ein untergeordnetes Element handelt. Wenn Sie dagegen mouseleave verwenden, wird das Ereignis nicht ausgelöst, wenn Sie mit der Maus über ein untergeordnetes Element fahren. Dies ist das Verhalten, das das OP erreichen möchte.

0
Erenor Paz