Touch events non funzionano

**Utonto Tonto** · 06-09-2021, 17:53

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>

**alka** · 09-09-2021, 09:49

Originariamente inviata da Utonto Tonto

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

Prima di analizzare la problematica, secondo me dovresti fornire qualche dettaglio in più: cosa stai cercando di ottenere con questo codice? qual è l'obiettivo finale?

Ciao!

**Utonto Tonto** · 09-09-2021, 11:18

Ciao alka,
il codice è solo per fare pratica nulla di più, non ho mai avuto l'occasione di usare i Touch Events e quindi ci stavo giocando un pò per capire come funzionano. Quello che intendevo fare è far partire l'evento touchstart se la larghezza del browser è inferiore a 500px e se maggiore far partire l'evento click.

P.S: Ho letto che i Touch Events stanno per essere rimpiazzati con i Pointer Capture Events...

Discussione: Touch events non funzionano

Strumenti discussione

Ricerca discussione

Visualizza

Touch events non funzionano

Tag per questa discussione

Permessi di invio