Problema de pedido onclick () e onblur ()

Eu tenho um campo de entrada que abre 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 um processamento especial deve ocorrer com base em qual div foi clicado.

Aqui está minha implementação:

O campo de entrada tem um onblur()evento que exclui o menu (definindo o do pai innerHTMLcomo uma string vazia) sempre que o usuário clica fora do campo de entrada. Os divs dentro do menu também possuem onclick()eventos que executam o processamento especial.

O problema é que os onclick()eventos nunca disparam quando o menu é clicado, porque o campo de entrada onblur()dispara primeiro e exclui o menu, incluindo o onclick()s!

Eu resolvi o problema dividindo os divs Menu onclick()em onmousedown()e onmouseup()eventos e definir um sinalizador global no mouse para baixo, que é cancelado no mouse para cima, semelhante ao que foi sugerido em esta resposta . Como onmousedown()dispara antes onblur(), o sinalizador será definido onblur()se um dos divs do menu for clicado, mas não se em algum outro lugar da tela for clicado. Se o menu foi clicado, eu retorno imediatamente onblur()sem excluí-lo e, em seguida, aguardo o onclick()disparo, momento em que posso excluir o menu com segurança.

Existe uma solução mais elegante?

O código é parecido com este:

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

Eu estava tendo exatamente o mesmo problema que você, minha IU foi projetada exatamente como você descreveu. Resolvi o problema simplesmente substituindo o onClickdos itens do menu por um onMouseDown. Eu não fiz mais nada; não onMouseUp, sem bandeiras. Isso resolveu o problema, permitindo que o navegador reordenasse automaticamente com base na prioridade desses manipuladores de eventos, sem nenhum trabalho adicional da minha parte.

Existe alguma razão pela qual isso não teria funcionado também para você?

onClicknão deve ser substituído por onMouseDown.

Embora essa abordagem funcione um pouco , os dois são eventos fundamentalmente diferentes que têm expectativas diferentes aos olhos do usuário. Usar em onMouseDownvez de onClickarruinará a previsibilidade de seu software neste caso. Portanto, os dois eventos não são intercambiáveis.

Para ilustrar: ao clicar acidentalmente em um botão, os usuários esperam conseguir manter o clique do mouse pressionado, arrastar o cursor para fora do elemento e soltar o botão do mouse, resultando em nenhuma ação. onClickfaz isso. onMouseDownnão permite que o usuário mantenha o mouse pressionado e, em vez disso, aciona imediatamente uma ação, sem nenhum recurso para o usuário. onClické o padrão pelo qual esperamos acionar ações em um computador.

Nesta situação, convoque event.preventDefault()o onMouseDownevento. onMouseDowncausará um evento de desfoque por padrão e não o fará quando preventDefaultfor chamado. Então, onClickterá a chance de ser chamado. Um evento de desfoque ainda vai acontecer, só depois onClick.

Afinal, o onClickevento é uma combinação de onMouseDowne onMouseUp, se e somente se ambos ocorrerem no mesmo elemento.

Substitua em onmousedowncom onfocus. Portanto, este evento será acionado quando o foco estiver dentro da caixa de texto.

Substitua em onmouseupcom onblur. No momento em que você tirar o foco da caixa de texto, o onblur será executado.

Eu acho que é disso que você precisa.

ATUALIZAÇÃO :

quando você executa sua função onfocus -> remove as classes que você irá aplicar em onblur e adicione as classes que você deseja que sejam executadas onfocus

e

quando você executa sua função onblur -> remove as classes que você irá aplicar no onfocus e adicione as classes que você deseja que sejam executadas no onblur

Não vejo nenhuma necessidade de variáveis ​​de sinalização.

ATUALIZAÇÃO 2:

Você pode usar os eventos onmouseout e onmouseover

onmouseover -Detecta quando o cursor está sobre ele.

onmouseout -Detecta quando o cursor sai.

Uma solução mais elegante (mas provavelmente com menos desempenho):

Em vez de usar o onblur da entrada para remover o menu, use document.onclick, que dispara depois onblur.

No entanto, isso também significa que o menu é removido quando a própria entrada é clicada, o que é um comportamento indesejado. Defina um input.onclickcom event.stopPropagation()para evitar a propagação de cliques para o evento de clique do documento.

mudar onclick por onfocus

mesmo que onblur e onclick não se dêem muito bem, mas obviamente onfocus e sim onblur. já que mesmo após o menu ser fechado, o onfocus é válido para o elemento clicado dentro.

Eu fiz e funcionou.

Você pode usar uma setIntervalfunção dentro do seu onBlurmanipulador, como esta:

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

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

a setIntervalfunção removerá sua onBlur função da pilha de chamadas, adicione porque você definiu o tempo como 0, esta função será chamada imediatamente após a conclusão de outro manipulador de eventos