RelatedTarget 返回 null

我有一个 <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>

27117 次浏览
小开
最佳答案

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

解说: event.relatedTarget包含一个 获得聚焦的元素。问题是 具体点 div 无法获得焦点，因为浏览器认为这个元素不是按钮/字段或某种控制元素。

下面是默认情况下可以获得关注的要素:

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

因此，当 onblur发生时，event.relatedTarget将包含上述元素。全部其他元素将不计数，点击他们将把 null在 event.relatedTarget。

但改变这种行为是可能的。您可以将 DOM 元素标记为可以使用 一个 href = “ https://developer.mozilla.org/en-US/docs/Web/HTML/Global _ properties/tabindex”rel = “ norefrer”> tabindex 属性获得焦点的元素。以下是标准的说法:

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

下面是修正后的代码片段:

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>


提交答案