我有 2 个元素。第一个元素有一个blur事件，第二个元素有一个mousedown事件。第二个元素上的事件mousedown将焦点返回到第一个元素，但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 事件之后，会发生模糊事件。这会将焦点从第一个输入上移开，您会看到执行模糊侦听器代码。
您可以添加e.preventDefault()到 mousedown 事件，也可以使用 或mouseup，click因为这两者都在模糊之后发生。不管怎样，第一个输入仍然会按照您的意愿获得焦点。