表題の通りとなります。
pointerdown イベントを付与した要素がイベント発火後に消える際、focus() メソッドで強制的にフォーカスを他の要素に付与したとしても外れてしまいます。
pointerup ではこのような現象は発生しないため、なぜ挙動が違うのか知りたいです。
また、Firefox の pointerdown ではフォーカスが外れる現象が発生しませんでした。
こちらについても原因がわかる方おられましたらご教授お願いします。
検証環境
- macOS 12.4
- Google Chrome 108.0.5359.124
- Firefox 108.0.1
- Safari 15.5
- Edge 108.0.1462.54
- Windows 10 Home 22H2
- Google Chrome 109.0.5414.75
- Edge 109.0.1518.61
- Firefox 109.0
検証手順
- input 要素をクリック
- Button(pointerup) をクリック→フォーカスが input に戻る
- input 要素をクリック
- Button(pointerdown) をクリック→フォーカスが input に戻らない
検証コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>検証</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>