0

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

検証コード

<!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>

1 件の回答 1

0

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

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

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

4
  • ご回答ありがとうございます。 pointerdown の挙動の違いについて理解しました。 preventDefault() を使用する形といたします。
    – cobra1991
    1月23日 3:02
  • Firefox のみ挙動が異なる点につきましては、バグと捉えて問題ないでしょうか。
    – cobra1991
    1月23日 3:03
  • 私の環境ではFirefoxも同じ動作でした。 OSとブラウザの組み合わせで、ボタンを押したときのデフォルト動作 が「ボタンがフォーカスされる」「ボタンはフォーカスされないが既存のフォーカスは外れる」「フォーカスが変わらない」のような挙動の差があったような気がします。
    – int32_t
    1月23日 4:34
  • 度々のご回答ありがとうございます。環境にも依存した挙動となるのですね。了解いたしました。
    – cobra1991
    1月23日 4:58

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。