当发生“模糊”事件时，我如何找出哪个元素焦点到？

javascript events

2022-08-30 01:01:00

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

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

有没有办法获取导致事件在函数内部触发的元素（单击的元素）的ID？如何？blur

例如，假设我有一个这样的跨度：

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

如果我在输入元素具有焦点后立即单击范围，则输入元素将失去其焦点。该函数如何知道是单击了该函数？mySpan

PS：如果 span 的 onclick 事件在输入元素的 onblur 事件之前发生，我的问题就会得到解决，因为我可以设置一些状态值来指示特定元素已被点击。

PPS：这个问题的背景是，我想从外部（从可单击的元素）触发AJAX自动完成器控件以显示其建议，而不会因为输入元素上的事件而立即消失建议。因此，如果单击了某个特定元素，我想检查该函数，如果是，请忽略blur事件。blurblur

答案 1

2015年答案：根据UI事件，可以使用事件的相关Target属性：

用于标识与焦点事件相关的辅助事件目标，具体取决于事件的类型。

对于模糊事件，

相关目标：事件目标接收焦点。

例：

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 在版本 48 之前不会支持（错误962251，MDN）。relatedTarget

答案 2

嗯。。。在 Firefox 中，您可以使用来拉取被点击的元素。我期望对IE做同样的事情，但它似乎不起作用...但是，您可以从文档中提取新获得焦点的元素：explicitOriginalTargettoElement

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 中根本不起作用。使用的最大问题（IE除外）是，在处理事件之前，它不会一致地更新，并且在处理过程中可能根本没有有效的值！这可以通过Michiel最终使用的技术的变化来缓解：activeElementblur

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不会将焦点放在单击的按钮上（与选项卡式相比）。

当发生“模糊”事件时，我如何找出哪个元素焦点*到*？

当发生“模糊”事件时，我如何找出哪个元素焦点到？