blur event.relatedTarget返回null

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包含获得焦点的元素.问题是你的特定 div无法获得焦点,因为浏览器认为这个元素不是按钮/字段或某种控制元素.

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

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

因此event.relatedTarget,当onblur发生时将包含上述元素.所有其他元素都不计算在内,点击它们就会被null输入event.relatedTarget.

但是有可能改变这种行为.您可以将DOM元素"标记"为可以使用tabindex属性获得焦点的元素.以下是标准说法:

所述tabindex内容属性允许作者指示元素应该是可聚焦的,它是否应该是可到达的使用顺序焦点导航和任选地,建议其中在所述连续的焦点导航顺序出现的元件.

所以这是更正的代码片段:

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>