Problema de pedido onclick () y onblur ()

Tengo un campo de entrada que abre un menú desplegable personalizado. Me gustaría la siguiente funcionalidad:

• Cuando el usuario hace clic en cualquier lugar fuera del campo de entrada, el menú debe eliminarse.
• Si, más específicamente, el usuario hace clic en un div dentro del menú, el menú debe eliminarse y debe producirse un procesamiento especial en función de qué div se hizo clic.

Aquí está mi implementación:

El campo de entrada tiene un onblur()evento que elimina el menú (estableciendo su padre innerHTMLen una cadena vacía) cada vez que el usuario hace clic fuera del campo de entrada. Los divs dentro del menú también tienen onclick()eventos que ejecutan el procesamiento especial.

El problema es que los onclick()eventos nunca se activan cuando se hace clic en el menú, porque el campo de entrada se onblur()activa primero y elimina el menú, incluidos los onclick()s!

Resolví el problema dividiendo los divs del menú onclick()en onmousedown()y onmouseup()eventos y estableciendo una bandera global al presionar el mouse hacia abajo que se borra al presionar el mouse hacia arriba, similar a lo que se sugirió en esta respuesta . Debido a que se onmousedown()dispara antes onblur(), la bandera se activará onblur()si se hizo clic en uno de los divs del menú, pero no si se hizo en otro lugar de la pantalla. Si se hizo clic en el menú, vuelvo inmediatamente onblur()sin eliminar el menú, luego espero a onclick()que se active, momento en el que puedo eliminar el menú de forma segura.

¿Existe una solución más elegante?

El código se parece a esto:

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

Estaba teniendo exactamente el mismo problema que usted, mi interfaz de usuario está diseñada exactamente como lo describe. Resolví el problema simplemente reemplazando el onClickde los elementos del menú con un onMouseDown. No hice nada más; NoonMouseUp , no hay banderas. Esto resolvió el problema al permitir que el navegador reordene automáticamente según la prioridad de estos controladores de eventos, sin ningún trabajo adicional por mi parte.

¿Hay alguna razón por la que esto no hubiera funcionado para usted?

onClick no debe ser reemplazado con onMouseDown .

Si bien este enfoque funciona de alguna manera , los dos son eventos fundamentalmente diferentes que tienen expectativas diferentes a los ojos del usuario. Usando en onMouseDownlugar deonClick arruinará la previsibilidad de su software en este caso. Por tanto, los dos eventos no son intercambiables.

Para ilustrar: al hacer clic accidentalmente en un botón, los usuarios esperan poder mantener presionado el clic del mouse, arrastrar el cursor fuera del elemento y soltar el botón del mouse, lo que finalmente no produce ninguna acción. onClickHaz esto. onMouseDownno permite que el usuario mantenga presionado el mouse y, en su lugar, activará inmediatamente una acción, sin ningún recurso para el usuario. onClickes el estándar por el cual esperamos activar acciones en una computadora.

En esta situación, llame event.preventDefault()al onMouseDownevento. onMouseDowncausará un evento de desenfoque de forma predeterminada y no lo hará cuando preventDefaultse llame. Entonces, onClicktendrá la oportunidad de ser llamado. Un evento borroso seguirá ocurriendo, solo después onClick.

Después de todo, el onClickevento es una combinación de onMouseDowny onMouseUp, si y solo si ambos ocurren dentro del mismo elemento.

Reemplazar onmousedowncon onfocus. Entonces, este evento se activará cuando el foco esté dentro del cuadro de texto.

Reemplazar onmouseupcon onblur. En el momento en que saque su enfoque del cuadro de texto, se ejecutará onblur.

Supongo que esto es lo que podrías necesitar.

ACTUALIZAR :

cuando ejecute su función onfocus -> elimine las clases que aplicará en onblur y agregue las clases que desea que se ejecuten onfocus

y

cuando ejecuta su función onblur -> elimine las clases que aplicará en onfocus y agregue las clases que desea que se ejecuten onblur

No veo ninguna necesidad de variables de marca.

ACTUALIZACIÓN 2:

Puede utilizar los eventos onmouseout y onmouseover

el ratón por encima -Detecta cuando el cursor está sobre él.

onmouseout -Detecta cuando el cursor sale.

Una solución más elegante (pero probablemente menos eficaz):

En lugar de usar el onblur de la entrada para eliminar el menú, use document.onclick, que se dispara después onblur.

Sin embargo, esto también significa que el menú se elimina cuando se hace clic en la entrada, lo que es un comportamiento no deseado. Establezca un input.onclickcon event.stopPropagation()para evitar la propagación de clics al evento de clic del documento.

cambiar onclick por onfocus

incluso si onblur y onclick no se llevan muy bien, pero obviamente onfocus y sí onblur. ya que incluso después de cerrar el menú, el enfoque sigue siendo válido para el elemento en el que se hace clic dentro.

Lo hice y funcionó.

Puede usar una setIntervalfunción dentro de su onBlurcontrolador, como esta:

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

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

la setIntervalfunción eliminará su onBlur función de la pila de llamadas, agregue porque estableció el tiempo en 0, esta función se llamará inmediatamente después de que finalice otro controlador de eventos