当'模糊'事件发生时，我怎样才能找出哪个元素焦点*到*？ [英] When a 'blur' event occurs, how can I find out which element focus went *to*?

问题描述

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

Suppose I attach an blur function to an HTML input box like this:

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

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

Is there a way to get the ID of the element which caused the blur event to fire (the element which was clicked) inside the function? How?

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

For example, suppose I have a span like this:

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

如果我在输入元素具有焦点后立即单击跨度，则输入元素将失去焦点。函数如何知道点击了 mySpan ？

If I click the span right after the input element has focus, the input element will lose its focus. How does the function know that it was mySpan that was clicked?

PS：如果跨度的onclick事件将在输入元素的onblur事件之前发生我的问题将被解决，因为我可以设置一些状态值，指示已经点击了特定元素。

PS: If the onclick event of the span would occur before the onblur event of the input element my problem would be solved, because I could set some status value indicating a specific element had been clicked.

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

PPS: The background of this problem is that I want to trigger an AJAX autocompleter control externally (from a clickable element) to show its suggestions, without the suggestions disappearing immediately because of the blur event on the input element. So I want to check in the blur function if one specific element has been clicked, and if so, ignore the blur event.

推荐答案

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

Hmm... In Firefox, you can use explicitOriginalTarget to pull the element that was clicked on. I expected toElement to do the same for IE, but it does not appear to work... However, you can pull the newly-focused element from the document:

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" />

---

警告：这 工作不用于通过键盘输入 tabbing 引起的焦点更改，并且在Chrome或Safari中根本不起作用。使用 activeElement （在IE中除外）的一个大问题是，在 之后 blur 事件已处理完毕，在处理期间可能根本没有有效值！这可以通过 Michiel最终使用的技术：

---

Caveat: This technique does not work for focus changes caused by tabbing through fields with the keyboard, and does not work at all in Chrome or Safari. The big problem with using activeElement (except in IE) is that it is not consistently updated until after the blur event has been processed, and may have no valid value at all during processing! This can be mitigated with a variation on the technique Michiel ended up using:

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没有将注意力集中在点击的按钮上（与标签相对应）。

This should work in most modern browsers (tested in Chrome, IE, and Firefox), with the caveat that Chrome does not set focus on buttons that are clicked (vs. tabbed to).

这篇关于当'模糊'事件发生时，我怎样才能找出哪个元素焦点*到*？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！