当一个“模糊”事件发生时，我如何知道哪个元素的焦点是* *?

Suppose I attach an blur function to an HTML input box like this:

假设我在HTML输入框中添加了一个模糊函数:

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

Is there a way to get the ID of the element which caused the blur event to fire (the element which was clicked) inside the function? How?

是否有一种方法可以获取使模糊事件在函数内触发(被单击的元素)的元素的ID ?如何?

For example, suppose I have a span like this:

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

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

If I click the span right after the input element has focus, the input element will lose its focus. How does the function know that it was mySpan that was clicked?

如果我在输入元素有焦点之后点击span，那么输入元素就会失去焦点。函数如何知道被单击的是mySpan ?

PS: If the onclick event of the span would occur before the onblur event of the input element my problem would be solved, because I could set some status value indicating a specific element had been clicked.

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

PPS: The background of this problem is that I want to trigger an AJAX autocompleter control externally (from a clickable element) to show its suggestions, without the suggestions disappearing immediately because of the blur event on the input element. So I want to check in the blur function if one specific element has been clicked, and if so, ignore the blur event.

PPS:这个问题的背景是，我想从外部(从可点击的元素)触发一个AJAX自动完成器控件来显示它的建议，而不是由于输入元素上的模糊事件而立即消失的建议。所以我想要检查模糊函数，如果一个特定的元素被点击了，如果被点击了，忽略这个模糊事件。

23 个解决方案

#1

Hmm... In Firefox, you can use explicitOriginalTarget to pull the element that was clicked on. I expected toElement to do the same for IE, but it does not appear to work... However, you can pull the newly-focused element from the document:

嗯…在Firefox中，您可以使用显式原创目标来提取所单击的元素。我希望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" />

---

Caveat: This technique does not work for focus changes caused by tabbing through fields with the keyboard, and does not work at all in Chrome or Safari. The big problem with using activeElement (except in IE) is that it is not consistently updated until after the blur event has been processed, and may have no valid value at all during processing! This can be mitigated with a variation on the technique Michiel ended up using:

注意:此技术不适用于通过键盘在字段中填表而引起的焦点更改，在Chrome或Safari中完全不起作用。使用activeElement的最大问题(IE除外)是，在处理模糊事件之前，它不会一直更新，并且在处理过程中可能根本没有有效的值!这可以通过米歇尔最终使用的技术的变化来缓解:

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);
}

This should work in most modern browsers (tested in Chrome, IE, and Firefox), with the caveat that Chrome does not set focus on buttons that are clicked (vs. tabbed to).

这应该适用于大多数现代浏览器(在Chrome、IE和Firefox中进行测试)，同时警告说Chrome没有将焦点集中在被单击的按钮上(与选项卡相比)。

#2

2015 answer: according to UI Events, you can use the relatedTarget property of the event:

答:根据UI事件，可以使用事件的关联目标属性:

Used to identify a secondary EventTarget related to a Focus event, depending on the type of event.

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

For blur events,

对于模糊事件,

relatedTarget: event target receiving focus.

关联目标:事件目标接收焦点。

Example:

例子:

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 />

Note Firefox won't support relatedTarget until version 48 (bug 962251, MDN).

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

#3

I solved it eventually with a timeout on the onblur event (thanks to the advice of a friend who is not *):

我最终在onblur事件超时时解决了这个问题(多亏了一个不是*的朋友的建议):

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

Works both in FF and IE.

既适用于FF，也适用于IE。

#4

It's possible to use mousedown event of document instead of blur:

可以使用鼠标左键事件代替模糊:

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

#5

The type FocusEvent instances have relatedTarget attribute, however, up to version 47 of the FF, specifically, this attribute returns null, from 48 already works.

但是，类型FocusEvent实例有relatedTarget属性，但是，在FF的第47版本中，这个属性返回null，从48起已经工作了。

You can to see more here.

你可以在这里看到更多。

#6

I am also trying to make Autocompleter ignore blurring if a specific element clicked and have a working solution, but for only Firefox due to explicitOriginalTarget

我还试图让Autocompleter忽略当一个特定的元素被点击并且有一个有效的解决方案时模糊化，但是仅仅是因为Firefox的原因

Autocompleter.Base.prototype.onBlur = Autocompleter.Base.prototype.onBlur.wrap( 
        function(origfunc, ev) {
            if ($(this.options.ignoreBlurEventElement)) {
                var newTargetElement = (ev.explicitOriginalTarget.nodeType == 3 ? ev.explicitOriginalTarget.parentNode : ev.explicitOriginalTarget);
                if (!newTargetElement.descendantOf($(this.options.ignoreBlurEventElement))) {
                    return origfunc(ev);
                }
            }
        }
    );

This code wraps default onBlur method of Autocompleter and checks if ignoreBlurEventElement parameters is set. if it is set, it checks everytime to see if clicked element is ignoreBlurEventElement or not. If it is, Autocompleter does not cal onBlur, else it calls onBlur. The only problem with this is that it only works in Firefox because explicitOriginalTarget property is Mozilla specific . Now I am trying to find a different way than using explicitOriginalTarget. The solution you have mentioned requires you to add onclick behaviour manually to the element. If I can't manage to solve explicitOriginalTarget issue, I guess I will follow your solution.

这段代码封装了Autocompleter的默认onBlur方法，检查ignoreBlurEventElement参数是否已设置。如果是的话，Autocompleter不会调用onBlur，否则它会调用onBlur。唯一的问题是它只能在Firefox中工作，因为显式目标属性是特定于Mozilla的。现在我正试图找到一种不同于使用显性目标的方法。您提到的解决方案要求您手动向元素添加onclick行为。如果我不能很好地解决问题，我想我会遵照你的解决方案。

#7

Can you reverse what you're checking and when? That is if you remeber what was blurred last:

你能把检查的内容和时间颠倒一下吗?那就是如果你还记得最后模糊的东西:

<input id="myInput" onblur="lastBlurred=this;"></input>

and then in the onClick for your span, call function() with both objects:

然后在onClick for your span中，调用函数()，同时调用两个对象:

<span id="mySpan" onClick="function(lastBlurred, this);">Hello World</span>

Your function could then decide whether or not to trigger the Ajax.AutoCompleter control. The function has the clicked object and the blurred object. The onBlur has already happened so it won't make the suggestions disappear.

然后，函数可以决定是否触发Ajax。自动完成控件。该函数具有单击对象和模糊对象。onBlur已经发生，所以不会让建议消失。

#8

Use something like this:

使用这样的:

var myVar = null;

And then inside your function:

然后在函数内部:

myVar = fldID;

And then:

然后:

setTimeout(setFocus,1000)

And then:

然后:

function setFocus(){ document.getElementById(fldID).focus(); }

Final code:

最后的代码:

<html>
<head>
    <script type="text/javascript">
        function somefunction(){
            var myVar = null;

            myVar = document.getElementById('myInput');

            if(myVar.value=='')
                setTimeout(setFocusOnJobTitle,1000);
            else
                myVar.value='Success';
        }
        function setFocusOnJobTitle(){
            document.getElementById('myInput').focus();
        }
    </script>
</head>
<body>
<label id="jobTitleId" for="myInput">Job Title</label>
<input id="myInput" onblur="somefunction();"></input>
</body>
</html>

#9

i think it's not possibe, with IE you can try to use window.event.toElement, but it dosn't work with firefox!

我认为这是不可能的，用IE你可以尝试使用windows .event。toElement, but it doesn 't work with firefox!

#10

As noted in this answer, you can check the value of document.activeElement. document is a global variable, so you don't have to do any magic to use it in your onBlur handler:

如本文所述，您可以检查document.activeElement的值。文档是一个全局变量，所以您不必在onBlur处理程序中使用它:

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

#11

• document.activeElement could be a parent node (for example body node because it is in a temporary phase switching from a target to another), so it is not usable for your scope
• 文档。activeElement可以是父节点(例如主体节点，因为它处于从目标到另一个目标的临时阶段切换中)，因此它不能用于您的范围
• ev.explicitOriginalTarget is not always valued
• 电动汽车。显性目标并不总是有价值的

So the best way is to use onclick on body event for understanding indirectly your node(event.target) is on blur

因此，最好的方法是使用onclick on body事件来间接理解您的节点(event.target)在blur中

#12

Edit: A hacky way to do it would be to create a variable that keeps track of focus for every element you care about. So, if you care that 'myInput' lost focus, set a variable to it on focus.

编辑:一种简单的方法是创建一个变量来跟踪关注的每个元素。所以，如果你关心myInput失去焦点，就在焦点上设置一个变量。

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

Original Answer: You can pass 'this' to the function.

原答:你可以把“this”传递给函数。

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

#13

I suggest using global variables blurfrom and blurto. Then, configure all elements you care about to assign their position in the DOM to the variable blurfrom when they lose focus. Additionally, configure them so that gaining focus sets the variable blurto to their position in the DOM. Then, you could use another function altogether to analyze the blurfrom and blurto data.

我建议使用模糊和模糊的全局变量。然后，配置您所关心的所有元素，将它们在DOM中的位置分配给变量，当它们失去焦点时，它们就会变得模糊。此外，对它们进行配置，使获取焦点将变量模糊到它们在DOM中的位置。然后，您可以使用另一个函数来分析模糊数据和模糊数据。

#14

keep in mind, that the solution with explicitOriginalTarget does not work for text-input-to-text-input jumps.

请记住，具有显式源目标的解决方案不适用于文本输入到文本输入的跳转。

try to replace buttons with the following text-inputs and you will see the difference:

尝试用以下文本输入替换按钮，您将看到不同之处:

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

#15

I've been playing with this same feature and found out that FF, IE, Chrome and Opera have the ability to provide the source element of an event. I haven't tested Safari but my guess is it might have something similar.

我一直在使用这个特性，发现FF、IE、Chrome和Opera都能够提供事件的源元素。我还没有测试Safari，但我猜它可能有类似的功能。

$('#Form').keyup(function (e) {
    var ctrl = null;
    if (e.originalEvent.explicitOriginalTarget) { // FF
        ctrl = e.originalEvent.explicitOriginalTarget;
    }
    else if (e.originalEvent.srcElement) { // IE, Chrome and Opera
        ctrl = e.originalEvent.srcElement;
    }
    //...
});

#16

I do not like using timeout when coding javascript so I would do it the opposite way of Michiel Borkent. (Did not try the code behind but you should get the idea).

我不喜欢在编码javascript时使用超时，所以我要用与Michiel Borkent相反的方法。(没有尝试后面的代码，但是您应该了解这个想法)。

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

In the head something like that

在头脑中就像这样

<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>

#17

You can fix IE with :

你可以用:

 event.currentTarget.firstChild.ownerDocument.activeElement

It looks like "explicitOriginalTarget" for FF.

它看起来像是FF的“显性目标”。

Antoine And J

安东尼和J

#18

I wrote an alternative solution how to make any element focusable and "blurable".

我编写了另一种解决方案，如何使任何元素可聚焦和“模糊”。

It's based on making an element as contentEditable and hiding visually it and disabling edit mode itself:

它的基础是将元素设置为contentEditable，并在视觉上隐藏它，并禁用编辑模式本身:

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

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

DEMO

演示

Note: Tested in Chrome, Firefox, and Safari (OS X). Not sure about IE.

注意:在Chrome、Firefox和Safari (OS X)中测试过。

---

Related: I was searching for a solution for VueJs, so for those who interested/curious how to implement such functionality using Vue Focusable directive, please take a look.

相关内容:我正在为VueJs寻找一种解决方案，所以对于那些有兴趣/好奇如何使用Vue可调焦指令实现这种功能的人，请查看。

#19

I see only hacks in the answers, but there's actually a builtin solution very easy to use : Basically you can capture the focus element like this:

我只看到了一些答案，但实际上有一个内置的解决方案很容易使用:基本上你可以捕捉到这样的焦点元素:

const focusedElement = document.activeElement

https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElem‌​ent

https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElem‌ent

#20

Works in Google Chrome v66.x, Mozilla v59.x and Microsoft Edge... Solution with jQuery.

在谷歌Chrome v66中工作。x,Mozilla v59。x和微软的边缘……与jQuery的解决方案。

I test in Internet Explorer 9 and not supported.

我在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
     }
});

Comment your test in others internet explorer versions.

在其他internet explorer版本中注释您的测试。

#21

This way:

这种方式:

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

Or if you attach the listener via JavaScript (jQuery in this example):

或者通过JavaScript(本例中为jQuery)附加监听器:

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

Edit: sorry. I misread the question.

编辑:对不起。我误解了问题。

#22

I think its easily possible via jquery by passing the reference of the field causing the onblur event in "this".
For e.g.

我认为通过jquery传递引发“this”中的onblur事件的字段引用很容易实现。如。

<input type="text" id="text1" onblur="showMessageOnOnblur(this)">

function showMessageOnOnblur(field){
    alert($(field).attr("id"));
}

Thanks
Monika

由于莫妮卡

#23

You could make it like this:

你可以这样写:

<script type="text/javascript">
function myFunction(thisElement) 
{
    document.getElementByName(thisElement)[0];
}
</script>
<input type="text" name="txtInput1" onBlur="myFunction(this.name)"/>