“模糊”事件无缘无故被触发？
[英]“blur” event being triggered for no reason?
问题描述
我有两个要素。 第一个元素具有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>
1 个解决方案
解决方案1
1 已采纳 2017-06-29 12:38:11
这不是错误，事件序列为：
mousedown
blur
mouseup
click
当您按下按钮时，将触发mousedown事件。 在该侦听器中，您将重点放在第一个输入上。 自然，在mousedown事件之后，就会发生模糊事件。 这使焦点从第一次输入移开，您将看到模糊侦听器代码执行。
您可以将e.preventDefault()添加到mousedown事件中，也可以使用mouseup或click因为两者都在模糊之后发生。 无论哪种方式，第一个输入都将根据您的需要具有焦点。
焦点触发的模糊事件
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.