"blur" 事件无缘无故被触发？

Question

我有两个元素。第一个元素有一个 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>

https://jsfiddle.net/rsh5aopg/

Answer 1

这不是错误，事件顺序是：

mousedown
blur
mouseup
click

当您按下按钮时，会触发 mousedown 事件。在该侦听器中，您关注第一个输入。当然，在 mousedown 事件之后，会发生 blur 事件。这会带走第一个输入的焦点，您会看到执行模糊侦听器代码。

您可以将 e.preventDefault() 添加到 mousedown 事件，或者使用 mouseup 或 click，因为它们都发生在模糊之后。无论哪种方式，第一个输入仍会如您所愿地获得焦点。

"blur" 事件无缘无故被触发？

"blur" event being triggered for no reason?

javascript

events

blur