模糊 event.relatedTarget returns 空

Question

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

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

但是正如您在下面的代码片段中看到的那样，它根本不起作用。 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 包含一个获得焦点的元素。问题是您的 specific div 无法获得焦点，因为浏览器认为此元素不是 button/field 或某种控制元素。

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

<a> elements with href attribute specified

<link> elements with href attribute specified

<button> elements

<input> elements that are not hidden

<select> elements

<textarea> elements

<menuitem> elements

elements with attribue draggable

<audio> and <video> elements with controls attribute specified

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

但是可以改变这种行为。您可以将 'mark' DOM 元素作为可以使用 tabindex 属性获得焦点的元素。这是标准的说法：

The tabindex content attribute allows authors to indicate that an element is supposed to be focusable, whether it is supposed to be reachable using sequential focus navigation and, optionally, to suggest where in the sequential focus navigation order the element appears.

这里是更正后的代码片段：

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>

模糊 event.relatedTarget returns 空

blur event.relatedTarget returns null

javascript

events

onblur

lost-focus

focusout