blur event.relatedTarget 返回 null

Question

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

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

但是，正如您在下面的 sn-p 中看到的，它根本不起作用。 event.relatedTarget 总是返回 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>

Answer 1

简答：将tabindex="0" 属性添加到应出现在event.relatedTarget 中的元素。

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

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

• 指定了href 属性的<a> 元素
• 指定了href 属性的<link> 元素
• <button>元素
• <input> 不是 hidden 的元素
• <select>元素
• <textarea>元素
• <menuitem>元素
• 属性为draggable的元素
• 指定了controls 属性的<audio> 和<video> 元素

所以当onblur 发生时，event.relatedTarget 将包含上述元素。 所有其他元素都不会被计算在内，点击它们会将null 放入event.relatedTarget。

但是可以改变这种行为。您可以使用 tabindex 属性将 DOM 元素“标记”为可以获得焦点的元素。标准是这样说的：

tabindex 内容属性允许作者指出一个元素应该是可聚焦的，是否应该使用顺序焦点导航来访问它，并且可以选择建议元素在顺序焦点导航顺序中出现的位置。

所以这里是修正后的代码 sn-p:

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 tabindex="0" class="special">Clicking here should not cause clearing!</div>