当“模糊"事件发生时，我怎样才能找出哪个元素焦点*到*? [英] 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>

有没有办法在函数内获取导致 blur 事件触发的元素的 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>

如果我在 input 元素获得焦点后立即单击 span，则 input 元素将失去焦点.函数如何知道点击的是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:如果 span 的 onclick 事件发生在 input 元素的 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 函数是否已单击一个特定元素，如果是，则忽略模糊事件.

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

<小时>

警告:这种技术对于用键盘在字段间tab引起的焦点变化不起作用，并且在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屋！