Problem z zamówieniem onclick () i onblur ()

Mam pole wprowadzania, które wyświetla niestandardowe menu rozwijane. Chciałbym mieć następującą funkcjonalność:

• Gdy użytkownik kliknie gdziekolwiek poza polem wejściowym, menu powinno zostać usunięte.
• Jeśli, dokładniej, użytkownik kliknie element div w menu, menu powinno zostać usunięte i powinno nastąpić specjalne przetwarzanie w zależności od tego, który element div został kliknięty.

Oto moja realizacja:

Pole wejściowe ma onblur()zdarzenie, które usuwa menu (ustawiając jego innerHTMLelement nadrzędny na pusty ciąg), gdy użytkownik kliknie poza polem wejściowym. Elementy div w menu mają również onclick()zdarzenia, które wykonują specjalne przetwarzanie.

Problem polega na tym, że onclick()zdarzenia nigdy nie są uruchamiane po kliknięciu menu, ponieważ pole wejściowe onblur()uruchamia się jako pierwsze i usuwa menu, w tym onclick()s!

I rozwiązać problem dzielenia DIV menu onclick()do onmousedown()i onmouseup()wydarzenia i ustawienie globalną flagę na myszy, która jest wydalana na mysz w górę, podobny do tego, co było sugerowane w tej odpowiedzi . Ponieważ onmousedown()uruchamia się wcześniej onblur(), flaga zostanie ustawiona, onblur()jeśli kliknięto jeden z elementów div menu, ale nie, jeśli gdzieś indziej na ekranie. Jeśli menu zostało kliknięte, natychmiast wracam z niego onblur()bez usuwania menu, a następnie czekam na onclick()uruchomienie, po czym mogę bezpiecznie usunąć menu.

Czy jest bardziej eleganckie rozwiązanie?

Kod wygląda mniej więcej tak:

<div class="menu" onmousedown="setFlag()" onmouseup="doProcessing()">...</div>
<input id="input" onblur="removeMenu()" ... />

var mouseflag;

function setFlag() {
    mouseflag = true;
}

function removeMenu() {
    if (!mouseflag) {
        document.getElementById('menu').innerHTML = '';
    }
}

function doProcessing(id, name) {
    mouseflag = false;
    ...
}

Miałem dokładnie ten sam problem co Ty, mój interfejs użytkownika jest zaprojektowany dokładnie tak, jak opisujesz. Rozwiązałem problem, po prostu zastępując onClickdla pozycji menu rozszerzenie onMouseDown. Nic innego nie zrobiłem; nie onMouseUp, żadnych flag. To rozwiązało problem, pozwalając przeglądarce automatycznie zmieniać kolejność na podstawie priorytetu tych programów obsługi zdarzeń, bez żadnej dodatkowej pracy z mojej strony.

Czy jest jakiś powód, dla którego to również nie zadziałałoby dla Ciebie?

onClicknie należy zastępować onMouseDown.

Chociaż to podejście w pewnym stopniu działa , są to zasadniczo różne zdarzenia, które mają różne oczekiwania w oczach użytkownika. W takim przypadku używanie onMouseDownzamiast onClickzrujnuje przewidywalność oprogramowania. Zatem te dwa zdarzenia są niezamienne.

Aby to zilustrować: po przypadkowym kliknięciu przycisku użytkownicy oczekują, że będą w stanie przytrzymać kliknięcie myszą, przeciągnąć kursor poza element i zwolnić przycisk myszy, co ostatecznie nie spowoduje żadnego działania. onClickrobi to. onMouseDownnie pozwala użytkownikowi na przytrzymanie przycisku myszy, a zamiast tego natychmiast wyzwoli akcję, bez żadnej możliwości dla użytkownika. onClickto standard, według którego spodziewamy się wyzwalania działań na komputerze.

W takiej sytuacji zadzwoń event.preventDefault()do onMouseDownwydarzenia. onMouseDownspowoduje domyślnie rozmycie i nie zrobi tego po preventDefaultwywołaniu. Wtedy onClickbędzie miał szansę zadzwonić. Rozmycie będzie nadal miało miejsce, dopiero po onClick.

W końcu onClickzdarzenie jest połączeniem onMouseDowni onMouseUp, wtedy i tylko wtedy, gdy oba występują w tym samym elemencie.

Wymienić na onmousedownz onfocus. Więc to zdarzenie zostanie wyzwolone, gdy fokus znajdzie się wewnątrz pola tekstowego.

Wymienić na onmouseupz onblur. W chwili, gdy wyłączysz fokus z pola tekstowego, uruchomi się onblur.

Myślę, że tego możesz potrzebować.

AKTUALIZACJA :

kiedy wykonujesz swoją funkcję onfocus -> usuń klasy, które zastosujesz w onblur i dodaj klasy, które chcesz wykonać onfocus

i

kiedy wykonujesz swoją funkcję onblur -> usuń klasy, które zastosujesz w onfocus i dodaj klasy, które chcesz wykonać onblur

Nie widzę potrzeby stosowania zmiennych flag.

AKTUALIZACJA 2:

Możesz używać wydarzeń onmouseout i onmouseover

onmouseover - Wykrywa, kiedy kursor jest nad nim.

onmouseout - Wykrywa, kiedy kursor wychodzi.

Bardziej eleganckie (ale prawdopodobnie mniej wydajne) rozwiązanie:

Zamiast używać onblur wejścia do usuwania menu, użyj document.onclick, który uruchamia się po onblur.

Jednak oznacza to również, że menu jest usuwane po kliknięciu samego wejścia, co jest niepożądanym zachowaniem. Ustaw wartość input.onclickz, event.stopPropagation()aby uniknąć propagowania kliknięć do zdarzenia kliknięcia dokumentu.

zmienić onclick przez onfocus

nawet jeśli onblur i onclick nie układają się zbyt dobrze, ale oczywiście onfocus i tak onblur. ponieważ nawet po zamknięciu menu onfocus nadal obowiązuje dla elementu klikniętego w środku.

Zrobiłem i zadziałało.

Możesz użyć setIntervalfunkcji wewnątrz swojego onBlurhandlera, na przykład:

<input id="input" onblur="removeMenu()" ... />

function removeMenu() {
    setInterval(function(){
        if (!mouseflag) {
            document.getElementById('menu').innerHTML = '';
        }
    }, 0);
}

setIntervalfunkcja usunie swoją onBlur funkcję się od stosu wywołań, dodać bo ustawisz czas 0, ta funkcja zostanie wywołana po zakończeniu drugiej niezwłocznie obsługi zdarzeń