gpt4 book ai didi

javascript - "blur"事件无故触发?

转载 作者:行者123 更新时间:2023-12-01 03:25:59 29 4
gpt4 key购买 nike

我有 2 个元素。第一个元素有一个 blur 事件,第二个元素有一个 mousedown 事件。第二个元素上的 mousedown 事件将焦点返回到第一个元素,但由于某种原因会触发第一个元素上的 blur 事件,即使第一个元素没有获得焦点在鼠标按下第二个元素之前。

为什么会发生这种情况?这是(以某种方式)期望的行为,还是某种错误?

<!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/

最佳答案

这不是一个错误,事件顺序是:

mousedown
blur
mouseup
click

当您按下按钮时,会触发 mousedown 事件。在该监听器中,您将关注第一个输入。当然,在 mousedown 事件之后,会发生模糊事件。这会将焦点从第一个输入中移开,您会看到执行模糊监听器代码。

您可以将 e.preventDefault() 添加到 mousedown 事件,或者使用 mouseupclick,因为它们都发生在模糊。不管怎样,第一个输入仍然会根据您的需要获得焦点。

关于javascript - "blur"事件无故触发?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44824700/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com