Skip to main content
adicionou 2 caracteres ao conteúdo
Fonte Link
Pedro Sanção
  • 5,7mil
  • 17
  • 41

Esse é o comportamento padrão, mas com uma condição você pode evitar esse comportamento.

var div = document.getElementsByTagName('div')[0];
div.classList.toggle('active');
div.addEventListener('blur', function(e){
  if (isChild(e.relatedTarget, this) || e.relatedTarget === this) {
    e.preventDefault();
    return;
  }
  div.classList.toggle('active');
}, true);

function isChild(child, parent) {
  while (child && (child = child.parentNode) && child !== parent);
  return !!child;
}
div {
  display: none;
}
div.active {
  display: block;
}
<div tabindex="-1">
  <header>My Tytle</header>
  <content>Hello world!!!</content>
  <footer>
    <button>My button</button>
  </footer>
</div>

A condição verifica se o elemento que causou o blur (e.relatedTarget) é filho ou igual ao elemento que escuta o evento e previne o comportamento padrão com event.preventDefault();

Resultado esperado: ao clicar sobre qualquer elemento da ele<div> ele continua visível, ao clicar fora ela é ocultada.

Esse é o comportamento padrão, mas com uma condição você pode evitar esse comportamento.

var div = document.getElementsByTagName('div')[0];
div.classList.toggle('active');
div.addEventListener('blur', function(e){
  if (isChild(e.relatedTarget, this) || e.relatedTarget === this) {
    e.preventDefault();
    return;
  }
  div.classList.toggle('active');
}, true);

function isChild(child, parent) {
  while (child && (child = child.parentNode) && child !== parent);
  return !!child;
}
div {
  display: none;
}
div.active {
  display: block;
}
<div tabindex="-1">
  <header>My Tytle</header>
  <content>Hello world!!!</content>
  <footer>
    <button>My button</button>
  </footer>
</div>

A condição verifica se o elemento que causou o blur (e.relatedTarget) é filho ou igual ao elemento que escuta o evento e previne o comportamento padrão com event.preventDefault();

Resultado esperado: ao clicar sobre qualquer elemento da ele continua visível, ao clicar fora ela é ocultada.

Esse é o comportamento padrão, mas com uma condição você pode evitar esse comportamento.

var div = document.getElementsByTagName('div')[0];
div.classList.toggle('active');
div.addEventListener('blur', function(e){
  if (isChild(e.relatedTarget, this) || e.relatedTarget === this) {
    e.preventDefault();
    return;
  }
  div.classList.toggle('active');
}, true);

function isChild(child, parent) {
  while (child && (child = child.parentNode) && child !== parent);
  return !!child;
}
div {
  display: none;
}
div.active {
  display: block;
}
<div tabindex="-1">
  <header>My Tytle</header>
  <content>Hello world!!!</content>
  <footer>
    <button>My button</button>
  </footer>
</div>

A condição verifica se o elemento que causou o blur (e.relatedTarget) é filho ou igual ao elemento que escuta o evento e previne o comportamento padrão com event.preventDefault();

Resultado esperado: ao clicar sobre qualquer elemento da <div> ele continua visível, ao clicar fora ela é ocultada.

adicionou 4 caracteres ao conteúdo
Fonte Link
Pedro Sanção
  • 5,7mil
  • 17
  • 41

Esse é o comportamento padrão, mas com uma condição você pode evitar esse comportamento.

var div = document.getElementsByTagName('div')[0];
div.classList.toggle('active');
div.addEventListener('blur', function(e){
  if (isChild(e.relatedTarget, this) || e.relatedTarget === this) {
    e.preventDefault();
    return;
  }
  div.classList.toggle('active');
}, true);

function isChild(child, parent) {
  while (child && (child = child.parentNode) && child !== parent);
  return !!child;
}
div {
  background-colordisplay: red;none;
}
div.active {
  background-colordisplay: blue;block;
}
<div tabindex="-1">
  <header>My Tytle</header>
  <content>Hello world!!!</content>
  <footer>
    <button>My button</button>
  </footer>
</div>

A condição verifica se o elemento que causou o blur (e.relatedTarget) é filho ou igual ao elemento que escuta o evento e previne o comportamento padrão com event.preventDefault();

Importante Resultado esperado: Modifiquei o CSS de display para cores de fundo para facilitar a visualizaçãoao clicar sobre qualquer elemento da ele continua visível, ao clicar fora ela é ocultada.

Esse é o comportamento padrão, mas com uma condição você pode evitar esse comportamento.

var div = document.getElementsByTagName('div')[0];
div.classList.toggle('active');
div.addEventListener('blur', function(e){
  if (isChild(e.relatedTarget, this) || e.relatedTarget === this) {
    e.preventDefault();
    return;
  }
  div.classList.toggle('active');
}, true);

function isChild(child, parent) {
  while (child && (child = child.parentNode) && child !== parent);
  return !!child;
}
div {
  background-color: red;
}
div.active {
  background-color: blue;
}
<div tabindex="-1">
  <header>My Tytle</header>
  <content>Hello world!!!</content>
  <footer>
    <button>My button</button>
  </footer>
</div>

A condição verifica se o elemento que causou o blur (e.relatedTarget) é filho ou igual ao elemento que escuta o evento e previne o comportamento padrão com event.preventDefault();

Importante: Modifiquei o CSS de display para cores de fundo para facilitar a visualização

Esse é o comportamento padrão, mas com uma condição você pode evitar esse comportamento.

var div = document.getElementsByTagName('div')[0];
div.classList.toggle('active');
div.addEventListener('blur', function(e){
  if (isChild(e.relatedTarget, this) || e.relatedTarget === this) {
    e.preventDefault();
    return;
  }
  div.classList.toggle('active');
}, true);

function isChild(child, parent) {
  while (child && (child = child.parentNode) && child !== parent);
  return !!child;
}
div {
  display: none;
}
div.active {
  display: block;
}
<div tabindex="-1">
  <header>My Tytle</header>
  <content>Hello world!!!</content>
  <footer>
    <button>My button</button>
  </footer>
</div>

A condição verifica se o elemento que causou o blur (e.relatedTarget) é filho ou igual ao elemento que escuta o evento e previne o comportamento padrão com event.preventDefault();

Resultado esperado: ao clicar sobre qualquer elemento da ele continua visível, ao clicar fora ela é ocultada.

Fonte Link
Pedro Sanção
  • 5,7mil
  • 17
  • 41

Esse é o comportamento padrão, mas com uma condição você pode evitar esse comportamento.

var div = document.getElementsByTagName('div')[0];
div.classList.toggle('active');
div.addEventListener('blur', function(e){
  if (isChild(e.relatedTarget, this) || e.relatedTarget === this) {
    e.preventDefault();
    return;
  }
  div.classList.toggle('active');
}, true);

function isChild(child, parent) {
  while (child && (child = child.parentNode) && child !== parent);
  return !!child;
}
div {
  background-color: red;
}
div.active {
  background-color: blue;
}
<div tabindex="-1">
  <header>My Tytle</header>
  <content>Hello world!!!</content>
  <footer>
    <button>My button</button>
  </footer>
</div>

A condição verifica se o elemento que causou o blur (e.relatedTarget) é filho ou igual ao elemento que escuta o evento e previne o comportamento padrão com event.preventDefault();

Importante: Modifiquei o CSS de display para cores de fundo para facilitar a visualização