Mam div na stronie, która pokazuje pewne informacje o określonej kategorii (obraz, nazwa itp.).

Po kliknięciu edycji obrazu umieszcza kategorię w trybie edycji, co pozwala mi zaktualizować nazwę. Jak widać z poniższego obrazu, pokazuje, że "zupa" jest obecnie w trybie edycji, pozostałe są w trybie normalnym widoku. To wszystko działa zgodnie z oczekiwaniami przycisków Anuluj / Zapisz wszystko w porządku. (Próbowałem dodać obraz, ale nie pozwolę mi, potrzebuję więcej miłości)

Jednak raz w trybie edycji, jeśli klikam gdziekolwiek indziej na stronie (poza div) oczekiwany wynik, że kategoria zupa wróci do trybu wyświetlania. Po wystrzeleniu wydarzenia, powinno to również pozwolić mi zapytać, czy chcą zapisać zmiany.

Więc zdecydowałem się zrobić, to stworzenie wydarzenia rozmycia na "Zupy" Div. Działa to zgodnie z oczekiwaniami, jeśli klikam gdziekolwiek na stronie, jednak jeśli klikam wewnętrzny element DIV, powoduje również zwolnienie zdarzeń rozmycia rodziców, co powoduje, że kategoria wróci do trybu wyświetlania.

Czy więc istnieje sposób, aby zapobiec wystrzeliwaniu wydarzenia rozmycia, jeśli jeden z jego dzieci otrzyma ostrość?

<div tabindex="-1" onblur="alert('outer')">
    <input type="text" value="Soup" />
</div>

Właśnie napisałem kod bez kompilatora, więc nie jestem pewien, czy to nawet działa, ale z tym, że mam nadzieję, że dostaniesz pomysł.

Używam Knockout.js, aby zaktualizować GUI w locie, ale to nie powinno wpływać na tę odpowiedź, nie pomyślałbym.

51
Thwaitesy 23 sierpień 2012, 17:05

3 odpowiedzi

Najlepsza odpowiedź

Musiałem wcześniej rozwiązać ten problem. Nie jestem pewien, czy jest to najlepsze rozwiązanie, ale to jest to, co się skończyło.

Ponieważ zdarzenie kliknięcia pożary po rozmyciu, nie ma (wiarygodnego, niezawodnego) sposobu, aby powiedzieć, jaki element ma naciskając ostrość.

Mousedown, jednak pożary przed rozmyciem. Oznacza to, że możesz ustawić trochę flagi w Mousedown elementów dzieci i przesłuchuje tę flagę w plamie swojego rodzica.

Przykład roboczy: http://jsfiddle.net/l5cts/

Należy również pamiętać, że będziesz musiał obsługiwać keydown (i sprawdzić zakładkę TAB / Shift-Tab), jeśli chcesz również złapać rozmycia spowodowane klawiaturą.

45
jbabey 23 sierpień 2012, 13:17

W obliczu tego samego problemu. To, co działało dla mnie.

 handleBlur(event) {
    // if the blur was because of outside focus
    // currentTarget is the parent element, relatedTarget is the clicked element
    if (!event.currentTarget.contains(event.relatedTarget)) {
        .....
    }
}

Cieszyć się :)

37
Yahel Yechieli 6 luty 2020, 12:16

Nie sądzę, że istnieje jakakolwiek gwarancja mousedown stanie się przed wydarzenia ostrości we wszystkich przeglądarkach, więc lepszym sposobem obsługi tego może być użycie evt.relatedTarget. Dla zdarzenia focusin właściwość eventTarget jest odniesieniem do elementu, który jest obecnie Utrata Focus. Możesz sprawdzić, czy ten element jest potomkiem rodzica, a jeśli nie, wiesz, że skupia się wchodzi do rodzica z zewnątrz. W przypadku zdarzenia focusout relatedTarget jest odniesieniem do elementu, który jest obecnie odbierający Focus. Użyj tej samej logiki, aby ustalić, czy ostrość jest w pełni opuszczająca rodzic:

const parent = document.getElementById('parent');

parent.addEventListener('focusin', e => {
    const enteringParent = !parent.contains(e.relatedTarget);

    if (enteringParent) {
        // do things in response to focus on any child of the parent or the parent itself
    }
});

parent.addEventListener('focusout', e => {
    const leavingParent = !parent.contains(e.relatedTarget);

    if (leavingParent) {
        // do things in response to fully leaving the parent element and all of its children
    }
});
25
Rob Allsopp 29 listopad 2017, 23:06