假设我将一个blur
函数附加到HTML输入框中,如下所示:
<input id="myInput" onblur="function() { ... }"></input>
有没有办法获得导致blur
事件触发的元素的ID (被点击的元素)在函数内部?怎么样?
例如,假设我有这样的跨度:
<span id="mySpan">Hello World</span>
如果我在输入元素具有焦点后单击该跨度,则输入元素将失去焦点。函数如何知道它mySpan
被点击了?
PS:如果跨度的onclick事件发生在输入元素的onblur事件之前,我的问题就会被解决,因为我可以设置一些状态值来指示一个特定的元素被点击了。
PPS:这个问题的背景是我想从外部触发一个AJAX autocompleter控件(来自可点击的元素)来显示它的建议,而不会立即因为blur
输入元素上的事件而消失。所以我想检查blur
一个特定的元素是否被点击过,如果是的话,忽略模糊事件。
嗯......在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" />
警告:这种技术并没有引起的焦点变化工作的互联通过与键盘领域,并没有在Chrome或Safari在所有工作。使用的一个大问题activeElement
(IE除外)是未持续更新,直到之后的blur
事件已被处理,并在处理过程中可能没有有效的价值可言!
{
// 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并未将焦点集中在单击按钮(与选项卡对应)上。
根据UI Events,你可以使用relatedTarget
事件的属性:
用于识别
EventTarget
与焦点事件相关的辅助,具体取决于事件的类型。
对于blur
事件,
relatedTarget
:接收焦点的事件目标。
例:
function 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 { background: orange }
.focused { background: lime }
<p>Blurred elements will become orange.</p>
<p>Focused elements should become lime.</p>
<input /><input /><input />
注意relatedTarget
直到版本48(bug 962251,MDN)才能支持Firefox 。