It is as the title suggests.
When an element that gives a pointerdown event disappears after the event fires, even if the focus() method forces other elements to focus, it will fall out.
This does not happen with pointerup, so I would like to know why the behavior is different.
Also, there was no out-of-focus phenomenon with Firefox pointerdown.
If you know the cause of this, please let me know.
Validation Environment
Verification Steps
Verification Code
<!DOCTYPE html>
<html lang="ja">
<head>
<metacharset="utf-8"/>
<title>Verification</title>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded',()=>{
document.addEventListener('focus',()=>{
console.log('focus', document.activeElement)
})
document.addEventListener('focusin',()=>{
console.log('focusin', document.activeElement)
})
document.addEventListener('focusout',()=>{
console.log('focusout', document.activeElement)
})
document.addEventListener('blur',()=>{
console.log('blur', document.activeElement)
})
const btnUpEl = document.getElementById('btnPointerUp');
btnUpEl?.addEventListener('pointerup',(e)=>{
console.log('pointerup');
e.target.remove();
document.getElementById('input') ?.focus();
});
const btnDownEl= document.getElementById('btnPointerDown');
btnDownEl?.addEventListener('pointerdown',(e)=>{
console.log('pointerdown');
e.target.remove();
document.getElementById('input') ?.focus();
// e.preventDefault();
});
});
</script>
</head>
<body>
<input id="input">
<button id="btnPointerUp">Button(pointerup)</button>
<button id="btnPointerDown">Button(pointerdown)</button>
</body>
</html>
Focus movement occurs with the default behavior of pointerdown.
Even if you change the focus in 2, it will be moved again in 3.To prevent this, do preventDefault().
© 2025 OneMinuteCode. All rights reserved.