当发生“模糊”事件时，我如何找出哪个元素焦点*到*？
假设我将 blur 函数附加到 HTML 输入框，如下所示：
<input id="myInput" onblur="function() { ... }"></input>
有没有办法在函数内部获取导致 blur 事件触发的元素的 ID（被点击的元素）？如何？
例如，假设我有这样的跨度：
<span id="mySpan">Hello World</span>
如果我在输入元素获得焦点后立即单击跨度，则输入元素将失去焦点。函数如何知道点击的是 mySpan？
PS：如果 span 的 onclick 事件发生在 input 元素的 onblur 事件之前，我的问题将得到解决，因为我可以设置一些状态值来指示特定元素已被单击。
PPS：这个问题的背景是我想在外部（从可点击元素）触发一个 AJAX 自动完成器控件以显示其建议，而不会因为输入元素上的 blur 事件而立即消失建议。因此，如果单击了某个特定元素，我想检查 blur 函数，如果是，则忽略模糊事件。
2015回答：根据UI Events，可以使用事件的relatedTarget属性：
用于标识与 Focus 事件相关的辅助 EventTarget，具体取决于事件的类型。
对于 blur 个事件，
relatedTarget：事件目标接收焦点。
例子：
函数 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 { 背景：橙色 } .focused { 背景：石灰 }
模糊的元素会变成橙色。
焦点元素应该变成石灰。
注意 Firefox 直到版本 48（bug 962251、MDN）才支持 relatedTarget。
嗯... 在 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 中除外）的最大问题是它直到 在 blur 事件被处理后才会持续更新，并且在处理过程中可能根本没有有效值！这可以通过 the technique Michiel ended up using 的变化来缓解：
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 不会将焦点放在被点击的按钮上（与标签页相比）。
blur 事件触发时未更新。我已经用详细信息更新了答案。您是否尝试过在 Chrome 或 Firefox 中为此使用 activeElement？它让你的元素被模糊......
我最终通过 onblur 事件超时解决了它（感谢不是 StackOverflow 的朋友的建议）：
<input id="myInput" onblur="setTimeout(function() {alert(clickSrc);},200);"></input>
<span onclick="clickSrc='mySpan';" id="mySpan">Hello World</span>
适用于 FF 和 IE。
可以使用文档的 mousedown 事件而不是模糊：
$(document).mousedown(function(){
if ($(event.target).attr("id") == "mySpan") {
// some process
}
});
适用于 Google Chrome v66.x、Mozilla v59.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
}
});
在其他 Internet Explorer 版本中评论您的测试。
如果单击特定元素并有一个有效的解决方案，我还试图让 Autocompleter 忽略模糊，但由于 explicitOriginalTarget 仅适用于 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);
}
}
}
);
此代码包装了 Autocompleter 的默认 onBlur 方法，并检查是否设置了 ignoreBlurEventElement 参数。如果已设置，则每次检查单击的元素是否为 ignoreBlurEventElement。如果是，Autocompleter 不会调用 onBlur，否则它会调用 onBlur。唯一的问题是它只适用于 Firefox，因为 explicitOriginalTarget 属性是 Mozilla 特定的。现在我试图找到一种不同于使用explicitOriginalTarget 的方法。您提到的解决方案要求您手动将 onclick 行为添加到元素。如果我无法解决explicitOriginalTarget 问题，我想我会遵循您的解决方案。
你能扭转你正在检查的内容和时间吗？也就是说，如果您还记得最后模糊的内容：
<input id="myInput" onblur="lastBlurred=this;"></input>
然后在您的跨度的 onClick 中，使用两个对象调用 function() ：
<span id="mySpan" onClick="function(lastBlurred, this);">Hello World</span>
然后，您的函数可以决定是否触发 Ajax.AutoCompleter 控件。该函数具有单击对象和模糊对象。 onBlur 已经发生，所以它不会使建议消失。
使用这样的东西：
var myVar = null;
然后在你的函数里面：
myVar = fldID;
接着：
setTimeout(setFocus,1000)
接着：
function setFocus(){ document.getElementById(fldID).focus(); }
最终代码：
<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>
我认为这是不可能的，使用 IE 你可以尝试使用 window.event.toElement，但它不适用于 firefox！
您可以使用以下方法修复 IE：
event.currentTarget.firstChild.ownerDocument.activeElement
它看起来像 FF 的“explicitOriginalTarget”。
安托万和 J
如 this answer 中所述，您可以检查 document.activeElement 的值。 document 是一个全局变量，因此您无需做任何魔术即可在 onBlur 处理程序中使用它：
function myOnBlur(e) {
if(document.activeElement ===
document.getElementById('elementToCheckForFocus')) {
// Focus went where we expected!
// ...
}
}
document.activeElement 可能是父节点（例如 body 节点，因为它处于从目标切换到另一个目标的临时阶段），因此它不适用于您的范围
ev.explicitOriginalTarget 并不总是被重视
所以最好的方法是使用 onclick 对 body 事件间接理解你的 node(event.target) 是模糊的
编辑：一个hacky方法是创建一个变量来跟踪您关心的每个元素的焦点。因此，如果您关心“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'
}" />
我建议使用全局变量 blurfrom 和 blurto。然后，配置您关心的所有元素，以在它们失去焦点时将它们在 DOM 中的位置分配给变量 blurfrom。此外，配置它们以便获得焦点将变量 blurto 设置为它们在 DOM 中的位置。然后，您可以完全使用另一个函数来分析 blurfrom 和 blurto 数据。
请记住，使用explicitOriginalTarget 的解决方案不适用于文本输入到文本输入的跳转。
尝试用以下文本输入替换按钮，您将看到不同之处：
<input id="btn1" onblur="showBlur(event)" value="text1">
<input id="btn2" onblur="showBlur(event)" value="text2">
<input id="btn3" onblur="showBlur(event)" value="text3">
我一直在使用相同的功能，发现 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;
}
//...
});
我不喜欢在编写 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>
我写了一篇 alternative solution 如何使任何元素具有焦点和“模糊性”。
它基于将元素设为 contentEditable 并在视觉上隐藏它并禁用编辑模式本身：
el.addEventListener("keydown", function(e) {
e.preventDefault();
e.stopPropagation();
});
el.addEventListener("blur", cbBlur);
el.contentEditable = true;
注意：在 Chrome、Firefox 和 Safari (OS X) 中测试。不确定IE。
相关：我正在寻找 VueJs 的解决方案，因此对于那些对如何使用 Vue Focusable 指令实现此类功能感兴趣/好奇的人，请take a look。
我在答案中只看到了黑客，但实际上有一个非常易于使用的内置解决方案：基本上你可以像这样捕获焦点元素：
const focusedElement = document.activeElement
https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement
这边走：
<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);
});
编辑：对不起。我误读了这个问题。
我认为它很容易通过 jquery 通过传递导致“this”中的 onblur 事件的字段的引用来实现。例如
<input type="text" id="text1" onblur="showMessageOnOnblur(this)">
function showMessageOnOnblur(field){
alert($(field).attr("id"));
}
谢谢莫妮卡
你可以这样：
<script type="text/javascript">
function myFunction(thisElement)
{
document.getElementByName(thisElement)[0];
}
</script>
<input type="text" name="txtInput1" onBlur="myFunction(this.name)"/>
关注公众号
不定期副业成功案例分享
relatedTarget将返回null。tabIndex="0"属性，它将起作用