"blur" 事件无缘无故被触发?
"blur" event being triggered for no reason?
我有两个元素。第一个元素有一个 blur
事件,第二个元素有一个 mousedown
事件。第二个元素上的 mousedown
事件 returns 聚焦到第一个元素,但是第一个元素上的 blur
由于某种原因被触发,即使第一个元素在 mousedown
计算第二个元素。
为什么会这样?这是(某种程度上)期望的行为,还是某种错误?
<!DOCTYPE html>
<html>
<head>
<title>Bug?</title>
</head>
<body>
<input type="text" />
<br /><br />
<button>Click me to focus on the input</button>
<br /><br />
<input type="text" />
<script type="text/javascript">
document.getElementsByTagName('input')[0].addEventListener('blur', function(e){
console.log('blur', e);
});
document.getElementsByTagName('button')[0].addEventListener('mousedown', function(e){
console.log('mousedown', e);
document.getElementsByTagName('input')[0].focus();
});
</script>
</body>
</html>
这不是错误,事件顺序是:
mousedown
blur
mouseup
click
当您按下按钮时,会触发 mousedown
事件。在该侦听器中,您关注第一个输入。当然,在 mousedown 事件之后,会发生 blur 事件。这会带走第一个输入的焦点,您会看到执行模糊侦听器代码。
您可以将 e.preventDefault()
添加到 mousedown 事件,或者使用 mouseup
或 click
,因为它们都发生在模糊之后。无论哪种方式,第一个输入仍会如您所愿地获得焦点。