Verhindern, dass das Blur-Ereignis ausgelöst wird, wenn eines seiner Kinder den Fokus erhält

9

Ich habe ein div auf einer Seite, die Informationen über eine bestimmte Kategorie (Bild, Name usw.) anzeigt.

Wenn ich auf das Bearbeitungsbild klicke, wird die Kategorie in den Bearbeitungsmodus versetzt, was mir erlaubt, den Namen zu aktualisieren. Wie Sie auf dem Bild unten sehen können, ist "Suppe" gerade im Bearbeitungsmodus, die anderen befinden sich im normalen Ansichtsmodus. Das alles funktioniert wie erwartet mit den Cancel / Save-Tasten, die alles richtig machen. (Ich habe versucht, ein Bild hinzuzufügen, aber würde mich nicht lassen, brauche mehr Liebe)

Jedoch einmal im Bearbeitungsmodus, wenn ich irgendwo anders auf der Seite klicke (Außerhalb des Bereichs), würde das erwartete Ergebnis sein, dass die Suppenkategorie in den Ansichtsmodus zurückkehren würde. Bei einer Ereignisauslösung in irgendeiner Form sollte mir dies auch erlauben zu fragen, ob sie Änderungen speichern wollen.

Also habe ich beschlossen, ein Unschärfereignis auf dem Eltern-Div "Suppen" zu erstellen. Dies funktioniert wie erwartet, wenn ich irgendwo auf die Seite klicke, aber wenn ich auf das innere Element des div klicke, wird auch das Blur-Ereignis der Eltern ausgelöst, was dazu führt, dass die Kategorie in den Ansichtsmodus zurückkehrt.

Gibt es also eine Möglichkeit, zu verhindern, dass das Eltern-Div das Blur-Ereignis auslöst, wenn eines seiner Kinder den Fokus erhält?

%Vor%

Ich habe den Code einfach ohne Compiler geschrieben, also nicht sicher, ob das überhaupt funktioniert, aber damit kommst du hoffentlich auf die Idee.

Ich benutze Knockout.js, um die GUI im laufenden Betrieb zu aktualisieren, aber das sollte diese Antwort nicht beeinflussen, hätte ich nicht gedacht.

    
Thwaitesy 23.08.2012, 13:05
quelle

2 Antworten

24

Ich musste dieses Problem schon früher angehen. Ich bin nicht sicher, ob es die beste Lösung ist, aber es ist, was ich am Ende benutzt habe.

Da das Klickereignis nach der Unschärfe ausgelöst wird, gibt es keine (browserübergreifende, zuverlässige) Methode, um festzustellen, welches Element den Fokus erhält.

Mousedown wird jedoch vor der Unschärfe ausgelöst. Das bedeutet, dass Sie im Mauszeiger auf Ihre untergeordneten Elemente eine Flagge setzen und diese Flagge in der Unschärfe Ihrer Eltern abfragen können.

Arbeitsbeispiel: Ссылка

Beachten Sie, dass Sie auch mit keydown umgehen müssen (und nach Tab / Shift-Tab suchen), wenn Sie auch durch die Tastatur verursachte Unschärfen erfassen möchten.

    
jbabey 23.08.2012, 13:17
quelle
0

Ich glaube nicht, dass es irgendeine Garantie dafür gibt, dass mousedown vor den Fokusereignissen in allen Browsern stattfindet, also wäre es besser, evt.relatedTarget . Für das Ereignis focusin ist die eventTarget -Eigenschaft eine Referenz auf das Element, das derzeit den Fokus verliert . Sie können überprüfen, ob dieses Element ein Nachkomme des übergeordneten Elements ist. Wenn dies nicht der Fall ist, wissen Sie, dass der Fokus von außen in das übergeordnete Element eingegeben wird. Für das Ereignis focusout ist relatedTarget eine Referenz auf das Element, das derzeit den Fokus erhält. Verwenden Sie die gleiche Logik, um festzustellen, ob der Fokus das übergeordnete Element vollständig verlässt:

%Vor%     
Robby Allsopp 29.11.2017 23:06
quelle