假设我在一个HTML输入框上附加了一个模糊函数，如下所示:
<input id="myInput" onblur="function() { ... }"></input>
是否有一种方法来获得导致模糊事件的元素的ID(被点击的元素)在函数内?如何?
例如，假设我有这样一个张成的空间:
<span id="mySpan">Hello World</span>
如果我在输入元素有焦点之后点击span，输入元素将失去它的焦点。该函数如何知道被单击的是mySpan ?
PS:如果跨度的onclick事件发生在输入元素的onblur事件之前，我的问题就解决了，因为我可以设置一些状态值，指示特定的元素已被单击。
PPS:这个问题的背景是，我想从外部触发一个AJAX自动补全控件(从一个可点击的元素)来显示它的建议，而不会因为输入元素上的模糊事件而立即消失建议。因此，我想检查是否有一个特定的元素被单击了模糊函数，如果是这样，忽略模糊事件。
当前回答
2015答案:根据UI Events，你可以使用事件的relatedTarget属性:
用于标识与焦点相关的次要EventTarget 事件，这取决于事件的类型。
对于模糊事件，
relatedTarget:事件目标接收焦点。
例子:
函数blurListener(事件){ event.target.className = '模糊'; 如果(event.relatedTarget) event.relatedTarget.className = 'focused'; } [].forEach.call(document.querySelectorAll('input')， function(el) { 埃尔。addEventListener('blur'， blurListener, false); })； .模糊{背景:橙色} .集中{背景:lime} <p>模糊的元素将变成橙色 <p>聚焦的元素应该变成石灰 <input /><input /><input />
注意Firefox直到48版才支持relatedTarget (bug 962251, MDN)。
其他回答
我也试图使自动补全器忽略模糊，如果一个特定的元素点击，并有一个工作的解决方案，但只有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.
我认为这很容易通过jquery通过传递字段的引用导致onblur事件在“this”。 如。
<input type="text" id="text1" onblur="showMessageOnOnblur(this)">
function showMessageOnOnblur(field){
alert($(field).attr("id"));
}
谢谢 莫妮卡
我最终解决了onblur事件的超时(感谢一个不是StackOverflow的朋友的建议):
<input id="myInput" onblur="setTimeout(function() {alert(clickSrc);},200);"></input>
<span onclick="clickSrc='mySpan';" id="mySpan">Hello World</span>
工作在FF和IE。
我在答案中只看到了黑客，但实际上有一个非常容易使用的内置解决方案: 基本上你可以像这样捕捉焦点元素:
const focusedElement = document.activeElement
https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement
可以这样说:
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>
