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

Gdy użytkownik kliknie gdziekolwiek poza polem wprowadzania, menu powinno zostać usunięte.Jeśli dokładniej, użytkownik kliknie div wewnątrz menu, menu powinno zostać usunięte,i specjalne przetwarzanie powinno nastąpić w oparciu o kliknięty div.

Oto moja implementacja:

Pole wejściowe maonblur() zdarzenie, które usuwa menu (ustawiając jego rodziców)innerHTML na pusty ciąg) za każdym razem, gdy użytkownik kliknie poza polem wprowadzania. Divy w menu również mająonclick() zdarzenia, które wykonują specjalne przetwarzanie.

Problem polega na tym, żeonclick() zdarzenia nigdy nie są uruchamiane po kliknięciu menu, ponieważ pole wejścioweonblur() odpala najpierw i usuwa menu, w tymonclick()s!

Rozwiązałem problem, dzieląc divy menu ”onclick() wonmousedown() ionmouseup() zdarzenia i ustawianie globalnej flagi przy wciśniętym przycisku myszy, która jest usuwana przy przesuwaniu myszy, podobnie jak to sugerowano wta odpowiedź. Boonmousedown() strzela przedonblur(), flaga zostanie ustawionaonblur() jeśli kliknięto jeden z menu div, ale nie, jeśli gdzieś na ekranie było. Jeśli kliknięto menu, natychmiast wracam zonblur() bez usuwania menu, poczekaj naonclick() strzelać, w którym mogę bezpiecznie usunąć menu.

Czy istnieje 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;
    ...
}