blocks|key|1747013|text|我最终在onblur事件上解决了这个问题(感谢一个不是StackOverflow的朋友的建议)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1747014|<input+id="myInput"+onblur="setTimeout(function()+{alert(clickSrc);},200);"></input>
<span+onclick="clickSrc='mySpan';"+id="mySpan">Hello+World</span>|code-block|syntax|javascript|1747015|在FF和IE中都能工作。|1747016|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I solved it eventually with a timeout on the onblur event (thanks to the advice of a friend who is not StackOverflow):</p>

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

<p>Works both in FF and IE. </p>


blocks|key|1532243|text|可以使用文档的mousedown事件而不是模糊：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1532244|$(document).mousedown(function(){
++if+($(event.target).attr("id")+==+"mySpan")+{
++++//+some+process
++}
});|code-block|syntax|javascript|1532245|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>It's possible to use mousedown event of document instead of blur:</p>

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


blocks|key|1747665|text|FocusEvent类型的实例具有relatedTarget属性，但是，直到FF的版本47，该属性都会返回null，而它已经工作了48个。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1747666|你可以看到更多的here。|1747667|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent^0|0|A|H|D|1H|4|0|8|4|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>The instance of type <code>FocusEvent</code> has the <code>relatedTarget</code> property, however, up to version 47 of the FF, specifically, this attribute returns <code>null</code>, from 48 it already works.</p>
<p>You can see more <a href="https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent" rel="nofollow noreferrer">here</a>.</p>


blocks|key|1532076|text|我还试图让自动补全忽略模糊，如果一个特定的元素点击，并有一个工作的解决方案，但由于explicitOriginalTarget，只有火狐|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1532077|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);
++++++++++++++++}
++++++++++++}
++++++++}
++++);|code-block|syntax|javascript|1532078|这段代码包装了自动完成程序的默认onBlur方法，并检查是否设置了ignoreBlurEventElement参数。如果设置了它，它每次都会检查所单击的元素是否为ignoreBlurEventElement。如果是，则自动完成程序不会调用onBlur，否则将调用onBlur。唯一的问题是，它只适用于火狐，因为explicitOriginalTarget属性是特定于Mozilla的。现在，我正在尝试寻找一种不同于使用explicitOriginalTarget的方法。您提到的解决方案要求您手动向元素添加onclick行为。如果我不能解决explicitOriginalTarget问题，我想我会遵循你的解决方案。|1532079|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

<pre><code>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);
                }
            }
        }
    );
</code></pre>

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


blocks|key|1531955|text|我认为这是不可能的，在IE中你可以尝试使用window.event.toElement，但它不能在火狐上工作！|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1531956|entityMap^0|L|M|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

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


blocks|key|1747324|text|使用类似如下的内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1747325|var+myVar+=+null;|code-block|syntax|javascript|1747326|然后在你的函数内部：|1747327|myVar+=+fldID;|1747328|然后：|1747329|setTimeout(setFocus,1000)|1747330|1747331|function+setFocus(){+document.getElementById(fldID).focus();+}|1747332|最终代码：|1747333|<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>|1747334|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|11|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|O|3|L|5|6|7|13|8|@]|9|@]|A|$]]|$1|P|3|Q|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|R|3|S|5|6|7|15|8|@]|9|@]|A|$]]|$1|T|3|U|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|V|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|W|$]]

<p>Use something like this:</p>

<pre class="lang-js prettyprint-override"><code>var myVar = null;
</code></pre>

<p>And then inside your function:</p>

<pre class="lang-js prettyprint-override"><code>myVar = fldID;
</code></pre>

<p>And then:</p>

<pre class="lang-js prettyprint-override"><code>setTimeout(setFocus,1000)
</code></pre>

<p>And then:</p>

<pre class="lang-js prettyprint-override"><code>function setFocus(){ document.getElementById(fldID).focus(); }
</code></pre>

<p>Final code:</p>

<pre class="lang-html prettyprint-override"><code>&lt;html&gt;
&lt;head&gt;
    &lt;script type="text/javascript"&gt;
        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();
        }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;label id="jobTitleId" for="myInput"&gt;Job Title&lt;/label&gt;
&lt;input id="myInput" onblur="somefunction();"&gt;&lt;/input&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|1532532|text|您可以使用以下命令修复IE：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1532533|+event.currentTarget.firstChild.ownerDocument.activeElement|code-block|syntax|javascript|1532534|它看起来像是FF的"explicitOriginalTarget“。|1532535|Antoine和J|1532536|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can fix IE with :</p>

<pre><code> event.currentTarget.firstChild.ownerDocument.activeElement
</code></pre>

<p>It looks like "explicitOriginalTarget" for FF.</p>

<p>Antoine And J</p>


blocks|key|1747589|text|正如this+answer中所指出的，您可以检查document.activeElement的值。document是一个全局变量，所以在onBlur处理程序中不需要使用它：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1747590|function+myOnBlur(e)+{
++if(document.activeElement+===
+++++++document.getElementById('elementToCheckForFocus'))+{
++++//+Focus+went+where+we+expected!
++++//+...
++}
}|code-block|syntax|javascript|1747591|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/7096271/473792^0|O|M|1D|8|2|B|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>As noted in <a href="https://stackoverflow.com/a/7096271/473792">this answer</a>, you can check the value of <code>document.activeElement</code>. <code>document</code> is a global variable, so you don't have to do any magic to use it in your onBlur handler:</p>

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


blocks|key|1747178|text|请记住，使用explicitOriginalTarget的解决方案不适用于文本输入到文本输入的跳转。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1747179|尝试用以下文本输入替换按钮，您将看到不同之处：|1747180|<input+id="btn1"+onblur="showBlur(event)"+value="text1">
<input+id="btn2"+onblur="showBlur(event)"+value="text2">
<input+id="btn3"+onblur="showBlur(event)"+value="text3">|code-block|syntax|javascript|1747181|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

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

<pre><code>&lt;input id="btn1" onblur="showBlur(event)" value="text1"&gt;
&lt;input id="btn2" onblur="showBlur(event)" value="text2"&gt;
&lt;input id="btn3" onblur="showBlur(event)" value="text3"&gt;
</code></pre>


blocks|key|1747304|text|我一直在使用同样的功能，发现FF、IE、Chrome和Opera都有能力提供事件的源元素。我还没有测试过Safari，但我猜它可能有类似的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1747305|$('#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;
++++}
++++//...
});|code-block|syntax|javascript|1747306|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>$('#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;
    }
    //...
});
</code></pre>


blocks|key|1532392|text|我不喜欢在编写javascript时使用超时，所以我会使用与Michiel+Borkent相反的方式。(我没有尝试后面的代码，但您应该已经明白了)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1532393|<input+id="myInput"+onblur="blured+=+this.id;"></input>
<span+onfocus+=+"sortOfCallback(this.id)"+id="mySpan">Hello+World</span>|code-block|syntax|javascript|1532394|在脑海中就像这样|1532395|<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>|1532396|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>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).</p>

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

<p>In the head something like that</p>

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


        }

    &lt;/script&gt;
&lt;/head&gt;
</code></pre>


blocks|key|1532768|text|我在答案中只看到了hack，但实际上有一个内置的解决方案非常容易使用:基本上你可以像这样捕获焦点元素：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1532769|const+focusedElement+=+document.activeElement|code-block|syntax|javascript|1532770|https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement|offset|length|1532771|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|2B|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

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

<pre><code>const focusedElement = document.activeElement
</code></pre>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement</a></p>


blocks|key|1747415|text|我认为通过jquery传递引起"this“中onblur事件的字段的引用很容易实现。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1747416|例如|1747417|<input+type="text"+id="text1"+onblur="showMessageOnOnblur(this)">

function+showMessageOnOnblur(field){
++++alert($(field).attr("id"));
}|code-block|syntax|javascript|1747418|谢谢|1747419|莫妮卡|1747420|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

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

<pre><code>&lt;input type="text" id="text1" onblur="showMessageOnOnblur(this)"&gt;

function showMessageOnOnblur(field){
    alert($(field).attr("id"));
}
</code></pre>

<p>Thanks<br>
Monika</p>


blocks|key|1532480|text|你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1532481|<script+type="text/javascript">
function+myFunction(thisElement)+
{
++++document.getElementByName(thisElement)[0];
}
</script>
<input+type="text"+name="txtInput1"+onBlur="myFunction(this.name)"/>|code-block|syntax|javascript|1532482|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You could make it like this:</p>

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


<p>Suppose I attach an <code>blur</code> function to an HTML input box like this:</p>

<pre><code>&lt;input id="myInput" onblur="function() { ... }"&gt;&lt;/input&gt;
</code></pre>

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

<p>For example, suppose I have a span like this:</p>

<pre><code>&lt;span id="mySpan"&gt;Hello World&lt;/span&gt;
</code></pre>

<p>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 <code>mySpan</code> that was clicked?</p>

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

<p>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 <code>blur</code> event on the input element. So I want to check in the <code>blur</code> function if one specific element has been clicked, and if so, ignore the blur event. </p>


When a 'blur' event occurs, how can I find out which element focus went *to*?

假设我将一个blur函数附加到一个超文本标记语言输入框，如下所示：<input id="myInput" onblur="function() { ... }"></input>有没有办法获得在函数中触发blur事件的元素(被单击的元素)的ID？多么?例如，假设我有一个这样的跨度：<span id="mySpan">Hello World</span>如果我在input元素获得焦点之后单击span

问当一个'blur‘事件发生时，我怎样才能找出哪个元素的焦点转到了*？
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当一个'blur‘事件发生时，我怎样才能找出哪个元素的焦点转到了*？EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当一个'blur‘事件发生时，我怎样才能找出哪个元素的焦点转到了*？
EN