Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    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>
    Ultima modifica di Utonto Tonto; 06-09-2021 a 17:56
    Se avete bisogno di una Web Page potete trovarmi qui: https://www.fiverr.com/s2/e6b3767f4c

  2. #2
    Moderatore di Programmazione L'avatar di alka
    Registrato dal
    Oct 2001
    residenza
    Reggio Emilia
    Messaggi
    23,951
    Quote Originariamente inviata da Utonto Tonto Visualizza il messaggio
    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!
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Home | Blog | Delphi Podcast | Twitch | Altro...

  3. #3
    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...
    Se avete bisogno di una Web Page potete trovarmi qui: https://www.fiverr.com/s2/e6b3767f4c

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.