假设我在一个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!
// ...
}
}
其他回答
我也试图使自动补全器忽略模糊，如果一个特定的元素点击，并有一个工作的解决方案，但只有Firefox由于显式originaltarget
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.
请记住，使用显式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">
我建议使用全局变量blurfrom和blurto。然后，配置您关心的所有元素，当它们失去焦点时，将它们在DOM中的位置分配给变量blurfrom。此外，配置它们，以便获得焦点将变量设置为它们在DOM中的位置。然后，您可以使用另一个函数来分析blurfrom和blurto数据。
我不喜欢在编码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>
我写了一个替代方案如何使任何元素可聚焦和“模糊”。
它基于将一个元素设置为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指令实现这样的功能的人，请看看。
