当onblur发生时，如何找出哪个元素聚焦到*？ [英] When onblur occurs, how can I find out which element focus went *to*?

问题描述

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

Suppose I attach an onblur function to an html input box like this:

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

有没有办法获取导致onblur事件的元素的ID（元素这是点击）里面的功能？如何？

Is there a way to get the ID of the element which caused the onblur 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.AutoCompleter控件（从可点击的元素）来显示其建议，而没有由于输入元素上的onblur事件而立即消失的建议。所以我想检查OnBlur函数，如果一个特定的元素被点击，如果是，忽略模糊事件。

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 onblur event on the input element. So I want to check in the OnBlur 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" />

---

警告：技术不不适用于通过键盘的字段通过标签引起的焦点更改，并且在Chrome或Safari中完全不起作用。使用 activeElement （IE除外）的最大问题是，直到 code>事件已被处理，在处理过程中可能没有任何有效的值！这可以通过技术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).

这篇关于当onblur发生时，如何找出哪个元素聚焦到*？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！