当发生'blur'事件时,我如何才能找出那些去*to*的元素焦点?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (9)

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

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

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

例如:

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

如果我在输入元素具有焦点后单击该跨度,则输入元素将失去焦点。函数如何知道它被点击了?

提问于
用户回答回答于

嗯......在Firefox中,可以使用explicitOriginalTarget拉取被点击的元素。但是,可以从文档中提取新聚焦的元素:

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

这可以通过对代码进行修改来缓解:

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);
}

用户回答回答于

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

识别EventTarget与焦点事件相关的辅助,具体取决于事件的类型。

对于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 />

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

扫码关注云+社区