Tengo una lista emergente que sugiere resultados de búsqueda como cuando se busca en Google. Tengo 2 detectores de eventos que se supone que deben mostrar y ocultar la ventana emergente si hace clic fuera del área. Funciona con clics, pero si intenta navegar con pestañas, lo mantiene abierto para siempre.
¿Cómo haría que sucediera el evento de enfoque al navegar con pestañas?
var popup2 = document.querySelector(".suggest-pop-up.s2"); document.getElementById('tags').addEventListener('focusout', e => { if (!popup2.contains(e.relatedTarget)) { popup2.style.display = "none"; popup2.style.pointerEvents = "none"; } }); document.getElementById('tags').addEventListener('focusin', e => { if (!popup2.contains(e.relatedTarget)) { popup2.style.display = "block"; popup2.style.pointerEvents = "all"; } }); <input id="tags" type="text" class="suggest s2" name="tags" required="required" autocomplete="off"> <div class="suggest-pop-up s2" style="display: block; pointer-events: all;"> <div class="suggest-box s2"> <li tabindex="0">#THING 1</li> <li tabindex="0">#THING 2</li> </div> </div> <br><div>I want #THING 1 and #THING 2 to appear on 1. tab press, then to be selectable while on any of the <li> and then to go away when tabing to the next element outside suggest-box s2.</div>Editar:
El problema era que solo escuchaba el enfoque en el elemento #tags input . Hacer que escuche en todo el cuerpo hace el trabajo. Así es como lo tengo ahora:
document.body.addEventListener('focusout', e => { if (!popup2.contains(e.relatedTarget)) { popup2.style.display = "none"; popup2.style.pointerEvents = "none"; } }); document.getElementById('tags').addEventListener('focusin', e => { if (!popup2.contains(e.relatedTarget)) { popup2.style.display = "block"; popup2.style.pointerEvents = "all"; } });Intente usar esta variable para la navegación por pestañas:
// check for focus var isFocused = (document.activeElement === popup2); alert(isFocused); // will come out false if not focusedSolo obtendrá focusOut una vez cuando se vaya, por lo que una mejor manera de abordar esto podría ser con un evento delegado en el cuerpo.
A continuación se muestra un ejemplo que usa un evento delegado en la etiqueta del cuerpo, luego usa el más cercano para ver si es alguno de los elementos, si es así, no colapsará.
const popup2 = document.querySelector(".suggest-pop-up.s2"); document.body.addEventListener('focusout', e => { if (e.relatedTarget && e.relatedTarget.closest('.suggest-pop-up')) return; popup2.style.display = "none"; popup2.style.pointerEvents = "none"; }); document.getElementById('tags').addEventListener('focusin', e => { popup2.style.display = "block"; popup2.style.pointerEvents = "all"; }); <input id="tags" type="text" class="suggest s2" name="tags" required="required" autocomplete="off"> <div class="suggest-pop-up s2" style="display: none; pointer-events: all;"> <div class="suggest-box s2"> <li tabindex="0">#THING 1</li> <li tabindex="0">#THING 2</li> </div> </div> <div> <input/> </div>Una alternativa es envolver el elemento <input> y los elementos "popup" <div> y establecer los oyentes en ellos.
Ejecute el ejemplo, haga clic en cualquier espacio en blanco en la ventana de resultados, luego presione "tab" varias veces.
EDITAR: si usa el elemento del body , eso tendrá el efecto de cada elemento en la página. Solo para que sepas.
const container = document.getElementById('container'); var popup2 = document.querySelector(".suggest-pop-up.s2"); container.addEventListener('focusout', e => { if (!popup2.contains(e.relatedTarget)) { popup2.style.display = "none"; popup2.style.pointerEvents = "none"; } }); container.addEventListener('focusin', e => { if (!popup2.contains(e.relatedTarget)) { popup2.style.display = "block"; popup2.style.pointerEvents = "all"; } }); <div autofocus tabindex="1">before focus in: </div> <div id="container"> <input id="tags" type="text" class="suggest s2" name="tags" required="required" autocomplete="off" tabindex="2"> <div class="suggest-pop-up s2" style="display: none; pointer-events: all;"> <div class="suggest-box s2"> <li tabindex="0">#THING 1</li> <li tabindex="0">#THING 2</li> </div> </div> </div> after focus out: <input>