假设我在一个HTML输入框上附加了一个模糊函数，如下所示:
<input id="myInput" onblur="function() { ... }"></input>
是否有一种方法来获得导致模糊事件的元素的ID(被点击的元素)在函数内?如何?
例如，假设我有这样一个张成的空间:
<span id="mySpan">Hello World</span>
如果我在输入元素有焦点之后点击span，输入元素将失去它的焦点。该函数如何知道被单击的是mySpan ?
PS:如果跨度的onclick事件发生在输入元素的onblur事件之前，我的问题就解决了，因为我可以设置一些状态值，指示特定的元素已被单击。
PPS:这个问题的背景是，我想从外部触发一个AJAX自动补全控件(从一个可点击的元素)来显示它的建议，而不会因为输入元素上的模糊事件而立即消失建议。因此，我想检查是否有一个特定的元素被单击了模糊函数，如果是这样，忽略模糊事件。
当前回答
我一直在玩这个功能，发现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;
}
//...
});
其他回答
如回答中所述，您可以检查document.activeElement的值。document是一个全局变量，所以你不需要在你的onBlur处理程序中使用它:
function myOnBlur(e) {
if(document.activeElement ===
document.getElementById('elementToCheckForFocus')) {
// Focus went where we expected!
// ...
}
}
编辑: 一种简单的方法是创建一个变量来跟踪您关心的每个元素的焦点。如果你关心'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'
}" />
我也试图使自动补全器忽略模糊，如果一个特定的元素点击，并有一个工作的解决方案，但只有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.
我不喜欢在编码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>
FocusEvent类型的实例具有relatedTarget属性，但是，在FF版本47之前，该属性返回null，从48开始它已经工作了。
你可以在这里看到更多。
