evento fogo só quando o foco é movido para fora de qualquer dos filhos de um elemento

votos
1

Eu quero acionar um evento quando e somente quando o usuário se concentra em algum lugar que não seja um elemento filho do div, por exemplo, quando o foco é transferido input1para input3:

<div onfocusout=console.log(document.activeElement)>
  <input type=text id=input1>
  <input type=text id=input2>
</div>

<input type=text id=input3>

No entanto, o evento focusOut está sendo acionado mesmo quando foco muda dentro elementos do div, por exemplo, quando o foco é transferido input1para input2. Para piorar a situação, document.activeElementsempre resolve bodyno focusOut instantânea é acionado (sugerindo que o foco rola todo o caminho de volta para o bodyantes de se mudar de volta para input2) por isso não posso verificar, mesmo manualmente onde o novo foco acaba antes do focusOut é acionado.

Publicado 02/09/2018 em 05:18
fonte usuário
Em outras línguas...                            


1 respostas

votos
1

Você pode verificar a relatedTargetpropriedade do eventpassado para o manipulador para ver qual elemento está recebendo o novo foco:

const container = document.querySelector('#container');
container.addEventListener('focusout', (e) => {
  console.log(e.relatedTarget);
  if (!container.contains(e.relatedTarget)) console.log('focus is now outside of container');
});
<div id="container">
  <input type="text" id="input1">
  <input type="text" id="input2">
</div>

<input type="text" id="input3">

Respondeu 02/09/2018 em 05:22
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more