Discussione: Touch events non funzionano

Navigazione veloce JavaScript Vai in cima

Visualizzazione discussione

06-09-2021, 17:53 #1

Utonto Tonto

Utente di HTML.it

Touch events non funzionano

Scusate ragazzi ma perchè l'evento touchstart non viene visto anche se mq.matches è true?

codice:

<head>
    <style>
        .text {
            color: #000;
            font-size: 32px;
            font-weight: 700;
            opacity: 0;
            text-align: center;
            transition: opacity .4s ease;
        }

        .text.show {
            opacity: 1;
        }

        @media screen and (max-width: 500px) {
            .text {
                color: steelblue;
            }
        }
    </style>
</head>
<body>
    <p class="text">Hello, World! : )</p>
    <button>CLICK ME</button>

    <script>
        const text = document.querySelector('.text');
        const btn = document.getElementsByTagName('button')[0];
        const mq = window.matchMedia('(max-width: 500px)');

        function showText(event) {
            btn.addEventListener(event, () => {
                console.log('event ', event);
                text.classList.toggle('show');
            });
        }

        mq.matches ? showText('touchstart') : showText('click');
    </script>
</body>