模糊 event.relatedTarget 返回 null [英] blur event.relatedTarget returns null

查看：16
本文介绍了模糊 event.relatedTarget 返回 null的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 <input type="text"> 字段，当这个字段失去焦点时我需要清除它(这意味着用户点击了页面上的某个地方).但有一个例外.当用户点击特定元素时，不应清除输入文本字段.

I have an <input type="text"> field and I need to clear it when this field loses focus (whiech means that user clicked somewhere on the page). But there is one exception. Input text field should't be cleared when user clicks on a specific element.

我尝试使用 event.relatedTarget 来检测用户是否不仅点击了某个地方，还点击了我的特定 <div>.

I tried to use event.relatedTarget to detect if user clicked not just somewhere but on my specific <div>.

但是，正如您在下面的代码段中看到的那样，它根本不起作用.event.relatedTarget 总是返回 null!

However as you can see in snippet below, it simply doesn't work. event.relatedTarget is always returning null!

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>

推荐答案

简短回答: 将 tabindex="0" 属性添加到应该出现在 event.relatedTarget.

Short answer: add tabindex="0" attribute to an element that should appear in event.relatedTarget.

说明: event.relatedTarget 包含一个获得焦点的元素.问题是您的特定 div 无法获得焦点，因为浏览器认为该元素不是按钮/字段或某种控制元素.

Explanation: event.relatedTarget contains an element that gained focus. And the problem is that your specific div can't gain a focus because browser thinks that this element is not a button/field or some kind of a control element.

以下是默认可以获得焦点的元素:

Here are the elements that can gain focus by default: