Eu tenho um campo de entrada que traz um menu suspenso personalizado. Eu gostaria da seguinte funcionalidade:

Quando o usuário clica em qualquer lugar fora do campo de entrada, o menu deve ser removido.Se, mais especificamente, o usuário clicar em um div dentro do menu, o menu deve ser removido,e processamento especial deve ocorrer com base em qual div foi clicado.

Aqui está minha implementação:

O campo de entrada tem umonblur() evento que apaga o menu (definindo o valor de seus paisinnerHTML para uma string vazia) sempre que o usuário clicar fora do campo de entrada. As divs dentro do menu também têmonclick() eventos que executam o processamento especial.

O problema é que oonclick() eventos nunca disparam quando o menu é clicado, porque o campo de entradaonblur() é acionado primeiro e exclui o menu, incluindo oonclick()s!

Eu resolvi o problema dividindo o divs do menuonclick() para dentroonmousedown() eonmouseup() eventos e definir um sinalizador global no mouse para baixo que é limpo no mouse para cima, semelhante ao que foi sugerido emesta resposta. Porqueonmousedown() incêndios antesonblur(), a bandeira será definida emonblur() se um dos menus divs foi clicado, mas não se algum outro lugar na tela foi. Se o menu foi clicado, eu volto imediatamenteonblur() sem excluir o menu, aguarde oonclick() para disparar, altura em que posso excluir com segurança o menu.

Existe uma solução mais elegante?

O código é algo como isto:

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