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

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

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

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

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

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

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

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


当前回答

我最终解决了onblur事件的超时(感谢一个不是StackOverflow的朋友的建议):

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

工作在FF和IE。

其他回答

我建议使用全局变量blurfrom和blurto。然后,配置您关心的所有元素,当它们失去焦点时,将它们在DOM中的位置分配给变量blurfrom。此外,配置它们,以便获得焦点将变量设置为它们在DOM中的位置。然后,您可以使用另一个函数来分析blurfrom和blurto数据。

可以使用mousedown事件的文档代替模糊:

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

我不喜欢在编码javascript时使用超时,所以我会用与Michiel Borkent相反的方式来做。(没有尝试后面的代码,但你应该得到的想法)。

<input id="myInput" onblur="blured = this.id;"></input>
<span onfocus = "sortOfCallback(this.id)" id="mySpan">Hello World</span>

在大脑中就像这样

<head>
    <script type="text/javascript">
        function sortOfCallback(id){
            bluredElement = document.getElementById(blured);
            // Do whatever you want on the blured element with the id of the focus element


        }

    </script>
</head>

FocusEvent类型的实例具有relatedTarget属性,但是,在FF版本47之前,该属性返回null,从48开始它已经工作了。

你可以在这里看到更多。

嗯…在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不会将焦点设置在单击的按钮上(而不是选项卡)。