I want to know why if the element with pointerdown disappears after ignition, the focus will be off even if another element is focused.

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

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

Google Chrome 108.0.5359.124
Firefox 108.0.1
Safari 15.5
Edge 108.0.1462.54

Google Chrome 109.0.5414.75
Edge 109.0.1518.61
Firefox 109.0

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>

html google-chrome firefox safari microsoft-edge

2023-01-23 02:55

1 Answers

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().

2023-01-23 04:33

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656