Не использовать blur() на родительский элемент, при фокусе на дочерний

Question

Возникла такая проблема. У меня есть дочерний div и родительский. На родительский div установлен focus и blur. Но как сделать что бы при фокусе на дочернем элементе, не срабатывал blur на родительском? Кто понял о чем я, помогите пожалуйста.

Когда я нажимаю на child, на parent элемент срабатывает blur. Как это исправить?

let p = document.querySelector(".parent")
let ch = document.getElementById("child");
p.addEventListener("focus", () => {
  p.classList.add("parent-after");
});
p.addEventListener("blur", () => {
  p.classList.remove("parent-after")
})

.parent {
  width: 400px;
  height: 200px;
  background-color: lightblue;
  cursor: pointer;
}

#child {
  width: 300px;
  height: 100px;
  background-color: white;
  font-size: 40px;
}

.parent-after {
  background-color: blue;
}

<div tabindex="0" class="parent">
  <div contenteditable="true" id="child">child</div>
</div>

Answer 1

form {
  filter: blur(1px);
}

form:focus-within {
  filter: none;
}

<form>
  Возникла такая проблема. У меня есть дочерний div и родительский. На родительский div установлен focus и blur. Но как сделать что бы при фокусе на дочернем элементе, не срабатывал blur на родительском? Кто понял о чем я, помогите пожалуйста.
  <input>
</form>

Answer 2

Полезность сомнительная - поддержка хуже чем у :focus-within, но можно попытаться их скомбинировать чтобы покрыть Edge 17-18.

form {
  position: relative;
  overflow: hidden;
  background: white;
}

div {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

:focus ~ div {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

<form>
  Возникла такая проблема. У меня есть дочерний div и родительский. На родительский div установлен focus и blur. Но как сделать что бы при фокусе на дочернем элементе, не срабатывал blur на родительском? Кто понял о чем я, помогите пожалуйста.
  <input>
  <div></div>
</form>

Answer 3

Только если { once: true } может не поддерживаться, то придётся расписать руками на функцию, вызывающую, а затем снимающую обработчик.

document.querySelector('form').addEventListener('focus', function (e) {
  console.log('focus')
})

document.querySelector('form').addEventListener('blur', function handler(e) {
  if (e.relatedTarget && e.relatedTarget.closest('form') === this) {
    e.relatedTarget.addEventListener('blur', handler.bind(this), { once: true })
    return console.log("Ignore blur")
  }
  
  console.log('blur')
})

<p><input>
<form tabindex=0><input> <input></form>
<p><input>

БЛОГ НА HUSL

Не использовать blur() на родительский элемент, при фокусе на дочерний

Ответы (3 шт):