Search code examples
javascripthtmlgoogle-chromekeyboardaddeventlistener

adding a keydown event listener prevents me from checking HTML elements by pressing F-12 in chrome

As the title says, when I add a keydown event listener in my javascript, pressing F-12 won't work.

        window.addEventListener("keydown", function (event) {
            if (event.defaultPrevented){
                return;
            }

            if (event.key == "w" || event.key == "ArrowUp"){
                console.log("test");
            }

            event.preventDefault();
        }, false);

This is the only thing I have to add inside my script tags in my HTML to prevent F-12 from working. The event listener is working tho, I am using the latest version of chrome. I am also importing THREE.js but not importing it doesn't change anything.

Here is the full raw HTML code, if it matters.

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first three.js app</title>
        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script> -->
        <style>
            body{
                margin-top: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        </style>
    </head>
    <body>
        <!-- <script src="script.js"></script> -->
        <script>

            window.addEventListener("keydown", function (event) {
                if (event.defaultPrevented){
                    return;
                }

                if (event.key == "w" || event.key == "ArrowUp"){
                    console.log("test");
                }

                event.preventDefault();
            }, false);

        </script>
    </body>
</html>
Solution

  • preventDefault(); prevents default behavior