假设我在一个HTML输入框上附加了一个模糊函数,如下所示:

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

是否有一种方法来获得导致模糊事件的元素的ID(被点击的元素)在函数内?如何?

例如,假设我有这样一个张成的空间:

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

如果我在输入元素有焦点之后点击span,输入元素将失去它的焦点。该函数如何知道被单击的是mySpan ?

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

PPS:这个问题的背景是,我想从外部触发一个AJAX自动补全控件(从一个可点击的元素)来显示它的建议,而不会因为输入元素上的模糊事件而立即消失建议。因此,我想检查是否有一个特定的元素被单击了模糊函数,如果是这样,忽略模糊事件。


当前回答

文档。activeElement可以是父节点(例如体节点,因为它处于从一个目标切换到另一个目标的临时阶段),因此它不适用于您的作用域 电动汽车。explicitOriginalTarget并不总是有值

所以最好的方法是使用onclick对body事件间接理解你的节点(event.target)是模糊

其他回答

编辑: 一种简单的方法是创建一个变量来跟踪您关心的每个元素的焦点。如果你关心'myInput'失去焦点,为它设置一个变量。

<script type="text/javascript">
   var lastFocusedElement;
</script>
<input id="myInput" onFocus="lastFocusedElement=this;" />

最初的回答: 你可以将“this”传递给函数。

<input id="myInput" onblur="function(this){
   var theId = this.id; // will be 'myInput'
}" />

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

用于标识与焦点相关的次要EventTarget 事件,这取决于事件的类型。

对于模糊事件,

relatedTarget:事件目标接收焦点。

例子:

函数blurListener(事件){ event.target.className = '模糊'; 如果(event.relatedTarget) event.relatedTarget.className = 'focused'; } [].forEach.call(document.querySelectorAll('input'), function(el) { 埃尔。addEventListener('blur', blurListener, false); }); .模糊{背景:橙色} .集中{背景:lime} <p>模糊的元素将变成橙色 <p>聚焦的元素应该变成石灰 <input /><input /><input />

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

我认为这是不可能的 在IE中,你可以尝试使用window.event。toElement,但它不工作与firefox!

嗯…在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" />

注意:这个技巧不适用于由键盘tab键引起的焦点变化,在Chrome和Safari中也完全不起作用。使用activeElement (IE除外)的一个大问题是,在处理模糊事件之前,它不会持续更新,并且在处理过程中可能根本没有有效值!这可以通过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不会将焦点设置在单击的按钮上(而不是选项卡)。

工作在谷歌Chrome v66。Mozilla v59. x。x和Microsoft Edge…jQuery解决方案。

我在Internet Explorer 9中测试,不支持。

$("#YourElement").blur(function(e){
     var InputTarget =  $(e.relatedTarget).attr("id"); // GET ID Element
     console.log(InputTarget);
     if(target == "YourId") { // If you want validate or make a action to specfic element
          ... // your code
     }
});

在其他ie浏览器版本中注释您的测试。