当'模糊'事件发生时,我怎样才能找出哪个元素焦点*到*？

Question

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

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

有没有办法blur在函数内部获取导致事件触发的元素的ID (被点击的元素)？怎么样？

例如,假设我有这样的跨度:

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

如果我在输入元素具有焦点后立即单击跨度,则输入元素将失去焦点.该功能如何知道它mySpan被点击了？

PS:如果跨度的onclick事件发生在输入元素的onblur事件之前,我的问题就会解决,因为我可以设置一些状态值,表明已经点击了一个特定的元素.

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

Answer 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并未将注意力集中在点击的按钮上(与标签相对应).

Answer 2

2015答案:根据UI Events,您可以使用relatedTarget事件的属性:

用于标识EventTarget与Focus事件相关的辅助节点,具体取决于事件的类型.

对于blur活动,

relatedTarget:事件目标接收焦点.

例:

function blurListener(event) {
  event.target.className = 'blurred';
  if(event.relatedTarget)
    event.relatedTarget.className = 'focused';
}
[].forEach.call(document.querySelectorAll('input'), function(el) {
  el.addEventListener('blur', blurListener, false);
});

.blurred { background: orange }
.focused { background: lime }

<p>Blurred elements will become orange.</p>
<p>Focused elements should become lime.</p>
<input /><input /><input />

注意Firefox relatedTarget直到版本48(bug 962251,MDN)才支持.

Answer 3

我最终在onblur事件上超时解决了它(感谢朋友的建议,而不是StackOverflow):

<input id="myInput" onblur="setTimeout(function() {alert(clickSrc);},200);"></input>
<span onclick="clickSrc='mySpan';" id="mySpan">Hello World</span>

适用于FF和IE.

Answer 4

可以使用mousedown事件而不是模糊:

$(document).mousedown(function(){
  if ($(event.target).attr("id") == "mySpan") {
    // some process
  }
});

Answer 5

但是,类型FocusEvent实例具有relatedTarget属性,直到FF的版本47,具体而言,此属性返回null,从48已经起作用.

你可以在这里看到更多.