93514


表題の通りとなります。  
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

検証手順

  1. input 要素をクリック
  2. Button(pointerup) をクリック→フォーカスが input に戻る
  3. input 要素をクリック
  4. Button(pointerdown) をクリック→フォーカスが input に戻らない

検証コード

[code]

    <!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>
    
[/code]


CC BY-SA 4.0
2023-01-21T16:56:48.240
93494
2023-01-22T22:58:13.857
2023-01-21T17:03:16.390
56696
56696
question
html google-chrome firefox safari microsoft-edge
pointerdown を付与した要素が発火後に消える場合、別の要素にフォーカスを付与してもフォーカスが外れてしまう原因が知りたい


フォーカスの移動は、`pointerdown` のデフォルト動作で行われます。

  1. マウスなどのボタンが押された
  2. `pointerdown` `mousedown` などのイベントリスナが呼ばれる
  3. `preventDefault()` されてなければ、デフォルト動作として押された要素へのフォーカス移動、テキスト選択の変更などが実行される

2の中でフォーカスを変更しても3で再移動されてしまうわけです。これを防ぐには `preventDefault()` を行います。


CC BY-SA 4.0
2023-01-22T22:51:13.570
93514
2023-01-22T22:58:13.857
2023-01-22T22:58:13.857
3475
3475
93494
answer