当“模糊”事件发生时,我如何才能发现哪个元素焦点被转移到*?

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

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

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

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

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

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

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

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

PPS:这个问题的背景是我想从外部触发一个AJAX autocompleter控件(来自可点击的元素)来显示它的建议,而不会立即因为blur输入元素上的事件而消失。所以我想检查blur一个特定的元素是否被点击过,如果是的话,忽略模糊事件。

一念之间一念之间提问于
酒当歌趁年轻,多折腾回答于
已采纳

嗯......在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事件已被处理,并在处理过程中可能没有有效的价值可言! { // 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并未将焦点集中在单击按钮(与选项卡对应)上。

珠政彬u回答于

根据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 。

扫码关注云+社区