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

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

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

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

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

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

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

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


当前回答

如回答中所述,您可以检查document.activeElement的值。document是一个全局变量,所以你不需要在你的onBlur处理程序中使用它:

function myOnBlur(e) {
  if(document.activeElement ===
       document.getElementById('elementToCheckForFocus')) {
    // Focus went where we expected!
    // ...
  }
}

其他回答

工作在谷歌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浏览器版本中注释您的测试。

我不喜欢在编码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开始它已经工作了。

你可以在这里看到更多。

我最终解决了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数据。