当发生“模糊”事件时，我如何找出哪个元素焦点*到*？

小编典典

当发生“模糊”事件时，我如何找出哪个元素焦点到？

all

假设我将一个blur函数附加到一个 HTML 输入框，如下所示：

<input id="myInput" onblur="function() { ... }"></input>

有没有办法blur在函数内部获取导致事件触发的元素的 ID（被点击的元素）？如何？

例如，假设我有这样的跨度：

<span id="mySpan">Hello World</span>

如果我在输入元素获得焦点后立即单击跨度，则输入元素将失去焦点。该函数如何知道它是mySpan被点击的？

PS：如果 span 的 onclick 事件发生在 input 元素的 onblur
事件之前，我的问题将得到解决，因为我可以设置一些状态值来指示特定元素已被单击。

PPS：这个问题的背景是我想从外部（从可点击元素）触发一个 AJAX
自动完成器控件来显示它的建议，而建议不会因为blur输入元素上的事件而立即消失。因此，如果单击了某个特定元素，我想检查该blur函数，如果是，则忽略模糊事件。

阅读 59

2022-06-14

共1个答案

小编典典

嗯… 在 Firefox 中，您可以使用explicitOriginalTarget拉取被点击的元素。我希望toElement对 IE
做同样的事情，但它似乎不起作用......但是，您可以从文档中提取新关注的元素：

function showBlur(ev)
{
   var target = ev.explicitOriginalTarget||document.activeElement;
   document.getElementById("focused").value = 
      target ? target.id||target.tagName||target : '';
}

...

<button id="btn1" onblur="showBlur(event)">Button 1</button>
<button id="btn2" onblur="showBlur(event)">Button 2</button>
<button id="btn3" onblur="showBlur(event)">Button 3</button>
<input id="focused" type="text" disabled="disabled" />

警告： 此技术不适用于使用键盘在字段中切换引起的焦点更改，并且在 Chrome 或 Safari
中根本不起作用。使用activeElement（IE除外）的一个大问题是它直到事件处理完毕后才会持续更新，
并且blur在处理过程中可能根本没有有效值！这可以通过改变 Michiel
最终使用的技术来缓解：

function showBlur(ev)
{
  // Use timeout to delay examination of activeElement until after blur/focus 
  // events have been processed.
  setTimeout(function()
  {
    var target = document.activeElement;
    document.getElementById("focused").value = 
      target ? target.id||target.tagName||target : '';
  }, 1);
}

这应该适用于大多数现代浏览器（在 Chrome、IE 和 Firefox 中测试），但需要注意的是，Chrome 不会将焦点放在被点击
的按钮上（与标签页相比）。

2022-06-14