Javascript blur event.relatedTarget返回null

我有一个

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

我尝试使用

event.relatedTarget

来检测用户是否不仅仅单击了某个地方，而是单击了我特定的

然而，正如您在下面的代码片段中所看到的，它根本不起作用<代码>事件。relatedTarget始终返回

null

功能失去焦点（事件）{
if（event.relatedTarget==null）{
document.getElementById（'text-field'）。值=“”；
}
}

.special{
宽度：200px；
高度：100px；
背景：#ccc；
边框：1px实心#000；
利润率：25px0；
填充：15px；
}
.特别：悬停{
光标：指针；
}

单击此处不应导致清除

简短回答：将

tabindex=“0”

属性添加到应出现在

事件中的元素。relatedTarget

解释：

事件。relatedTarget

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

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

• 属性。standart是这么说的：
  
  tabindex
  content属性允许作者指示某个元素应该是可聚焦的，是否应该使用顺序焦点导航访问该元素，以及（可选）建议元素在顺序焦点导航顺序中出现的位置
  
  下面是正确的代码片段：
  
  
  功能失去焦点（事件）{
  if（event.relatedTarget==null）{
  document.getElementById（'text-field'）。值=“”；
  }
  }
  .special{
  宽度：200px；
  高度：100px；
  背景：#ccc；
  边框：1px实心#000；
  利润率：25px0；
  填充：15px；
  }
  .特别：悬停{
  光标：指针；
  }
  
  单击此处不应导致清除请注意，在Safari/Firefox中的macOS/iOS上，某些表单控件（）在单击时未聚焦。将其设置为0会将其添加到键盘选项卡列表中，这可能是不需要的。使用-1来避免这种情况。