eu tenho um<input type="text"> e preciso desmarcá-lo quando esse campo perder o foco (o que significa que o usuário clicou em algum lugar da página). Mas há uma exceção. O campo de texto de entrada não deve ser limpo quando o usuário clicar em um elemento específico.

Eu tentei usarevent.relatedTarget para detectar se o usuário clicou não apenas em algum lugar, mas no meu específico<div>.

No entanto, como você pode ver no snippet abaixo, ele simplesmente não funciona.event.relatedTarget está sempre retornandonull!

function lose_focus(event) {
  if(event.relatedTarget === null) {
    document.getElementById('text-field').value = '';
  }
}

.special {
  width: 200px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
  margin: 25px 0;
  padding: 15px;
}
.special:hover {
  cursor: pointer;
}

<input id="text-field" type="text" onblur="lose_focus(event)" placeholder="Type something...">

<div class="special">Clicking here should not cause clearing!</div>