javascript - 模糊event.relatedTarget返回null

我有一个<input type="text">字段，当该字段失去焦点时，我需要清除它(提示用户单击页面上的某个位置)。但是有一个异常(exception)。用户单击特定元素时，不应清除输入文本字段。

我尝试使用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>

最佳答案

简短答案:将tabindex="0"属性添加到应显示在event.relatedTarget中的元素中。

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

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



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

但是可以改变这种行为。您可以将DOM元素标记为可以通过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>

关于javascript - 模糊event.relatedTarget返回null，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42764494/