I have 2 elements. The first element has a blur event, and the second element has a mousedown event. The mousedown event on the second element returns the focus to the first element, but blur on the first element is triggered for some reason, even if the first element wasn't focused before mousedowning the second element.
Why does this happen? Is this (somehow) desired behaviour, or is this some kind of bug?
<!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>
/
I have 2 elements. The first element has a blur event, and the second element has a mousedown event. The mousedown event on the second element returns the focus to the first element, but blur on the first element is triggered for some reason, even if the first element wasn't focused before mousedowning the second element.
Why does this happen? Is this (somehow) desired behaviour, or is this some kind of bug?
<!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/rsh5aopg/
Share Improve this question edited Jun 29, 2017 at 12:12 asked Jun 29, 2017 at 12:07 user1846065user1846065 10- 1 I expect the following behaviour: mousedown ( focus on the button ) -> function changes focus (focus on the input) -> mouseup (focus on the button => blur of the input). – Edwin Commented Jun 29, 2017 at 12:14
-
2
@Edwin is correct, or so it seems. Out of interest, why are you using
mousedownand notclick? – George Commented Jun 29, 2017 at 12:16 - I don't think so... mouseup fires /after/ blur. The events fire in order mousedown, blur, mouseup, click. I need to do some stuff before blur is run, which is why I'm using mousedown instead of click. stackoverflow./questions/22867022/onblur-vs-onclick-timing – user1846065 Commented Jun 29, 2017 at 12:17
- I just added a mouseup event to the second element... it triggers after the blur. The blur is not being caused by mouseup. – user1846065 Commented Jun 29, 2017 at 12:23
- you have two blurs, one for the input and one for the button – Edwin Commented Jun 29, 2017 at 12:26
1 Answer
Reset to default 7This is not a bug, the event sequence is:
mousedown
blur
mouseup
click
When you press the button, the mousedown event is triggered. Within that listener, you focus the first input. Naturally, after the mousedown event, the blur event happens. This takes away focus from first input and you see the blur listener code execute.
You can either add e.preventDefault() to the mousedown event, or use either mouseup or click as those both happen after the blur. Either way, the first input will still have focus as you desire.