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

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

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

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

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

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

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

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


当前回答

我写了一个替代方案如何使任何元素可聚焦和“模糊”。

它基于将一个元素设置为contentteditable,并在视觉上隐藏它,并禁用编辑模式本身:

el.addEventListener("keydown", function(e) {
  e.preventDefault();
  e.stopPropagation();
});

el.addEventListener("blur", cbBlur);
el.contentEditable = true;

DEMO

注:在Chrome, Firefox和Safari (OS X)中测试,对IE不确定。


相关:我正在寻找Vue的解决方案,所以对于那些感兴趣/好奇如何使用Vue Focusable指令实现这样的功能的人,请看看。

其他回答

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

编辑: 一种简单的方法是创建一个变量来跟踪您关心的每个元素的焦点。如果你关心'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'
}" />

这种方式:

<script type="text/javascript">
    function yourFunction(element) {
        alert(element);
    }
</script>
<input id="myinput" onblur="yourFunction(this)">

或者如果你通过JavaScript(本例中是jQuery)附加监听器:

var input = $('#myinput').blur(function() {
    alert(this);
});

编辑:对不起。我看错了问题。

请记住,使用显式originaltarget的解决方案不适用于文本输入到文本输入的跳转。

试着用以下文本输入替换按钮,你会看到区别:

<input id="btn1" onblur="showBlur(event)" value="text1">
<input id="btn2" onblur="showBlur(event)" value="text2">
<input id="btn3" onblur="showBlur(event)" value="text3">

你可以通过以下方法修复IE:

 event.currentTarget.firstChild.ownerDocument.activeElement

它看起来像FF的“explicitOriginalTarget”。

安东尼和J