event.changedTouches[0].clientX ne fonctionne plus

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Rego38
Messages : 5
Enregistré le : 26 janv. 2020, 19:53

event.changedTouches[0].clientX ne fonctionne plus

Message par Rego38 » 26 janv. 2020, 20:37

Bonjour à tous,

Je viens juste de m'inscrire sur ce forum.
Je suis complètement autodidacte en javascript et suis venu à apprendre ce langage récemment afin d'enrichir les fonctionnalités de mon site photo.

Je travaille sur le codage d'un slider, en local (wamp), avec le logiciel Visual Studio code. J'utilise alors FireFox dans lequel, pour simuler les fonctions touch, je me place en affichage "mobile phone".

J'utilise les évènements ontouchstart, ontouchmove et ontouchend pour appeler les fonctions correspondantes dans lesquelles j'utilise touches[0].clientX et changedTouches[0].clientX afin de connaître les positions du doigt sur l'écran et de faire les mouvements adéquats ... enfin comme pour un slider. Je pense que je ne vais pas vous apprendre ce que c'est.

Bref, j'ai utilisé ces 2 commandes sans soucis jusque récemment, mais depuis hier la commande changedTouches[0].clientX ne semble plus fonctionner.
En testant changedTouches.length, j'obtiens 0, bref comme si l'info de fin de touch n'était plus "comprise".
Et cela fait bien entendu planter mon script.

Alors pour tenter de savoir d'où venait mon problème, je suis reparti d'un script de base avec juste 2 div (1 rouge et 1 vert) et des fonctions très simple ... où il ne se passe en fait rien d'autre que l'enregistrement de touches[0].clientX et de changedTouches[0].clientX et leur affichage.
Mais j'ai le même résultats : touches[0].clientX est bien enregistré, mais changedTouches[0].clientX fait planter le script ; ce qui est normal puisque là encore changedTouches.length me donne 0.

Bref ... j'ai besoin d'aide s'il vous plaît !!

Voici mon code, que pour simplifier, j'ai mis sur une seule page HTML :

Code : Tout sélectionner


<!DOCTYPE html>
<html>


<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" type="image/ico" href=images/Favicon.ico />
    <script type="text/javascript" src="js/js_slider.js"></script>
    <title>Essai</title>
    <style>
        .classe_essai1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: red;
        }
        .classe_essai2 {
            position: absolute;
            top: 0;
            left: 100%;
            width: 100vw;
            height: 100vh;
            background-color: green;
        }
    </style>
</head>


<body>
    <div id="essai1" class="classe_essai1"
    ontouchstart="Img_TouchStart1(event)"
    ontouchmove="Img_TouchMove1(event)"
    ontouchend="Img_TouchEnd1(event)">
        <p id="texte1"> page1 </p>
    </div>

    <div id="essai2" class="classe_essai2"
    ontouchstart="Img_TouchStart1(event)"
    ontouchmove="Img_TouchMove1(event)"
    ontouchend="Img_TouchEnd1(event)">
        <p> page2 </p>
    </div>
</body>


<script>
    var startX;

    function Img_TouchStart1(evt) {
        startX = evt.touches[0].clientX;
        //J'ai testé de mettre ici le code :  alert("position initiale : " + startX);
        //Cela fonctionne bien
    }


    function Img_TouchMove1(evt) {
        var deplacement_live = startX - evt.touches[0].clientX;
        //J'ai testé de mettre ici le code : alert("deplacement : " + deplacement_live);
        //Cela fonctionne, mais affecte bien entendu l'affichage qui se raffraît en permanence.
        evt.preventDefault();
    }

    function Img_TouchEnd1(evt) {
        alert("position initiale : " + startX);      //fonctionne bien : il garde bien en mémoire startX
        var longueurTouch = evt.changedTouches.length;   
        alert("longueur : " + longueurTouch);    //fonctionne bien, mais me donne 0
        var endX = evt.changedTouches[0].clientX;
        alert("position finale : " + endX);    //ne s'affiche pas, car je pense que la ligne précédente fait planter le script
    }

</script>

</html>



Rego38
Messages : 5
Enregistré le : 26 janv. 2020, 19:53

Re: event.changedTouches[0].clientX ne fonctionne plus

Message par Rego38 » 26 janv. 2020, 21:23

Si cela peut vous aider, la console me donner le message d'erreur suivant :

TypeError: evt.changedTouches[0] is undefinedessai.php:72:20
Img_TouchEnd1 http://localhost/Regophotowebsite/essai.php:72
ontouchend http://localhost/Regophotowebsite/essai.php:1
sendTouchEvent resource://devtools/server/actors/emulation/touch-simulator.js:362
handleEvent resource://devtools/server/actors/emulation/touch-simulator.js:277

J'avoue ne pas du tout savoir comment interpréter ces lignes ...

Rego38
Messages : 5
Enregistré le : 26 janv. 2020, 19:53

Re: event.changedTouches[0].clientX ne fonctionne plus

Message par Rego38 » 26 janv. 2020, 21:42

Bon, je continue mon investigation de mon côté.

J'ai trouvé sur un site, une personne qui a mis "evt.changedTouches[0].clientX" dans la fonction Touchmove au lieu de Touchend .... et je viens d'essayer et ça marche.

Donc la commande evt.changedTouches[0].clientX est bien reconnue et calculée si elle est mise dans dans la fonction Touchmove.
Mieux, si la variable est définie en dehors des fonctions (pour être globale), alors je peux l'afficher dans la fonction Touchend (elle est donc bien mémorisée).

Bref, en attendant de savoir pourquoi cette fichue commande ne fonctionne pas dans la fonction Touchend, je vais la placer dans la fonction TouchMove.

C'est incroyable cette histoire !!

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: event.changedTouches[0].clientX ne fonctionne plus

Message par webmaster » 27 janv. 2020, 10:11

Bonjour

Il manque le fichier slider.js pour pouvoir tester réellement le phénomène

Ca serait bien de le déposer pour au moins tester.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Rego38
Messages : 5
Enregistré le : 26 janv. 2020, 19:53

Re: event.changedTouches[0].clientX ne fonctionne plus

Message par Rego38 » 27 janv. 2020, 19:58

Bonsoir, merci pour ton message.

ok, mais mon code est ... long.
Il est aussi compliqué par le fait que je prendre en compte le numéro de la photo à afficher (par exemple, si la 1ère photo est affichée, alors on ne peut pas faire de glisser vers la droite ... puisqu'il n'y a pas d'autre photo !)

Code : Tout sélectionner


function Img_TouchStart(evt) {
    //Enregistrement de la position initial du touch horizontal (en X)
    startingX = evt.touches[0].clientX;
    evt.preventDefault();
}


function Img_TouchMove(evt) {
    // Calcul du déplacement
    var deplacement_live = startingX - evt.touches[0].clientX;

    
    // Initialisation de la vitesse de déplacement latéral des divs
    document.getElementById("Image_div_img_" + num_img_gche).style.transition = 'left 0s';
    document.getElementById("Image_div_img_" + num_img).style.transition = 'left 0s';
    document.getElementById("Image_div_img_" + num_img_dte).style.transition = 'left 0s';

    // Déplacement du div
    if (deplacement_live > 0) {
        // Le glisser vers la gauche se fait si on n'est pas sur la dernière image
        if (document.getElementById('id_memo').innerHTML != nb_images) {
            // Calcul du déplacement
            if (num_img > 1) {
                deplacement_live_total = parseInt(document.getElementById("Image_div_img_1").offsetLeft - 10) - deplacement_live;
                // Application du déplacement
                document.getElementById("Image_div_img_" + num_img).style.left = deplacement_live_total + 'px';
                document.getElementById("Image_div_img_" + num_img_dte).style.left = deplacement_live_total + 'px';
            } else if (num_img = 1) {
                // Application du déplacement
                document.getElementById("Image_div_img_" + num_img).style.left = -deplacement_live + 'px';
                document.getElementById("Image_div_img_" + num_img_dte).style.left = -deplacement_live + 'px';
            }
        }
            
    } else if (deplacement_live < 0) {
        // Le glisser vers la droite se fait si on n'est pas sur la première image
        if (document.getElementById('id_memo').innerHTML != 1) {
            // Calcul du déplacement
            if (num_img > 2) {
                deplacement_live_total = parseInt(document.getElementById("Image_div_img_1").offsetLeft - 10) - deplacement_live;
                // Application du déplacement
                document.getElementById("Image_div_img_" + num_img_gche).style.left = deplacement_live_total + 'px';
                document.getElementById("Image_div_img_" + num_img).style.left = deplacement_live_total + 'px';
            } else if (num_img == 2) {
                var unite_decalage_gche = parseInt(document.getElementById("Image_div_img_" + num_img).clientWidth) + 20;
                deplacement_live_total = - unite_decalage_gche - deplacement_live;
                // Application du déplacement
                document.getElementById("Image_div_img_" + num_img_gche).style.left = deplacement_live_total + 'px';
                document.getElementById("Image_div_img_" + num_img).style.left = deplacement_live_total + 'px';
            }
        }
    

    }

    //Enregistrement de la position finale du touch horizontal (en X)
    deplacement_final = startingX - evt.changedTouches[0].clientX;

    // Je ne sais pas vraiment à quoi sert cette ligne, mais elle était dans le tuto
    //qui m'a appris à faire le slider ... et à priori elle est utile !!
    evt.preventDefault();

}




function Img_TouchEnd(evt) {
    
    // Définition de la limite de déplacement du touch au delà de laquelle on veut effectuer le changement d'image
    var limite = screen.width / 5;


    // Si glisser vers la gauche plus long que la limite
    if (deplacement_final > 0 && deplacement_final > limite) {
        // Le défilement se fait si on n'est pas sur la dernière image
        if (document.getElementById('id_memo').innerHTML != nb_images) {
            // Repositionnement des div des images
            //document.getElementById("Image_div_img_" + num_img_gche).style.left = '0px';
            document.getElementById("Image_div_img_" + num_img).style.transition = 'left 0.3s';
            document.getElementById("Image_div_img_" + num_img_dte).style.transition = 'left 0.3s';
            //var decalage_gche = document.getElementById("Image_div_img_" + num_img_dte).clientWidth + 20;   // 20=10+10 de margin
            var unite_decalage_gche = parseInt(document.getElementById("Image_div_img_" + num_img).clientWidth) + 20;
            
            // Décalage de toutes les div vers la gauche
            if (num_img > 1){
                var decalage_gche = -(document.getElementById("Image_div_img_1").offsetLeft - 10) + unite_decalage_gche;
                for (var i = 1 ; i <= nb_images ; i++ ) {
                    document.getElementById("Image_div_img_" + i).style.left = '-' + decalage_gche + 'px';
                }
            } else {
                var decalage_gche = unite_decalage_gche + 10;
                for (var i = 1 ; i <= nb_images ; i++ ) {
                    document.getElementById("Image_div_img_" + i).style.left = '-' + decalage_gche + 'px';
                }
            }
        
            // Chargement de l'image de la nouvelle div de droite
            if (num_img != nb_images - 1) {
                var nouvelle_img_dte = parseInt(num_img) + 2;
                document.getElementById("id_img_" + nouvelle_img_dte).src = image_path + "/IMG/IMG_" + nouvelle_img_dte + ".jpg";
            }

            // CHangement de classe pour la div de gauche
            if (num_img != 1) {
                document.getElementById("Image_div_img_" + num_img_gche).className = "div_display_initial";
            }
            // Changement de la valeur du mémo (=numéro de l'image à afficher)
            document.getElementById('id_memo').innerHTML = parseInt(document.getElementById('id_memo').innerHTML) + 1;
            
            // Mise à jour des valeurs de num_img, num_img_gche et num_img_dte
            num_img = document.getElementById('id_memo').innerHTML
            document.getElementById("Image_div_img_" + num_img).className = "div_img_centre";
            num_img_gche = num_img - 1;
            document.getElementById("Image_div_img_" + num_img_gche).className = "div_img_gche";
            if (num_img != nb_images) {
                num_img_dte = parseInt(num_img) + 1;
                document.getElementById("Image_div_img_" + num_img_dte).className = "div_img_dte";
            }
            
        }

    // Si glisser vers la droite plus long que la limite
    } else if (deplacement_final < 0 && (deplacement_final * -1) > limite) {
        // Le changement d'image se fait si on n'est pas sur la première image
        if (document.getElementById('id_memo').innerHTML != 1) {
            // Repositionnement des div des images
            document.getElementById("Image_div_img_" + num_img_gche).style.transition = 'left 0.3s';
            document.getElementById("Image_div_img_" + num_img).style.transition = 'left 0.3s';
            //var decalage_dte = document.getElementById("Image_div_img_" + num_img_dte).clientWidth + 20;   // 20=10+10 de margin
            var unite_decalage_dte = parseInt(document.getElementById("Image_div_img_" + num_img).clientWidth) + 20;
            
            // Décalage de toutes les div vers la droite
            //alert("décalage supplémentaire  : " + unite_decalage_gche)
            if (num_img > 2){
                var decalage_dte = -(document.getElementById("Image_div_img_1").offsetLeft - 10) - unite_decalage_dte;
                for (var i = 1 ; i <= nb_images ; i++ ) {
                    document.getElementById("Image_div_img_" + i).style.left = '-' + decalage_dte + 'px';
                }
            } else {
                for (var i = 1 ; i <= nb_images ; i++ ) {
                    document.getElementById("Image_div_img_" + i).style.left = '-10px';
                }
            }
            
            // Chargement de l'image de la nouvelle div de gauche
            if (num_img != 2) {
                var nouvelle_img_gche = parseInt(num_img) - 2;
                document.getElementById("id_img_" + nouvelle_img_gche).src = image_path + "/IMG/IMG_" + nouvelle_img_gche + ".jpg";
            }

            // CHangement de classe pour la div de droite
            if (num_img != nb_images) {
                document.getElementById("Image_div_img_" + num_img_dte).className = "div_display_initial";
            }

            // Changement de la valeur du mémo (=numéro de l'image à afficher)
            document.getElementById('id_memo').innerHTML = parseInt(document.getElementById('id_memo').innerHTML) - 1;
            
            // Mise à jour des num_img, num_img_gche et num_img_dte
            num_img = document.getElementById('id_memo').innerHTML
            document.getElementById("Image_div_img_" + num_img).className = "div_img_centre";
            if (num_img != 1) {
                num_img_gche = num_img - 1;
                document.getElementById("Image_div_img_" + num_img_gche).className = "div_img_gche";
            }
            num_img_dte = parseInt(num_img) + 1;
            document.getElementById("Image_div_img_" + num_img_dte).className = "div_img_dte";
            
        }

    // Si glisser vers la gauche moins long que la limite, on remet l'image à sa position intiale
    } else if (deplacement_final > 0 && deplacement_final < limite) {
        // Repositionnement des div des images
        document.getElementById("Image_div_img_" + num_img).style.transition = 'left 0.3s';
        document.getElementById("Image_div_img_" + num_img_dte).style.transition = 'left 0.3s';
        if (num_img > 1){
            var decalage_gche = document.getElementById("Image_div_img_1").offsetLeft - 10;
            document.getElementById("Image_div_img_" + num_img).style.left = decalage_gche + 'px';
            document.getElementById("Image_div_img_" + num_img_dte).style.left = decalage_gche + 'px';
        } else if (num_img == 1) {
            document.getElementById("Image_div_img_" + num_img).style.left = '-10px';
            document.getElementById("Image_div_img_" + num_img_dte).style.left = '-10px';
        }

    // Si glisser vers la droite moins long que la limite, on remet l'image à sa position intiale
    } else if (deplacement_final < 0 && (deplacement_final * -1) < limite) {
        // Repositionnement des div des images
        document.getElementById("Image_div_img_" + num_img_gche).style.transition = 'left 0.3s';
        document.getElementById("Image_div_img_" + num_img).style.transition = 'left 0.3s';
        if (num_img > 2){
            var decalage_dte = document.getElementById("Image_div_img_1").offsetLeft - 10;
            document.getElementById("Image_div_img_" + num_img_gche).style.left = decalage_dte + 'px';
            document.getElementById("Image_div_img_" + num_img).style.left = decalage_dte + 'px';
        } else if (num_img == 2) {
            var decalage_dte = parseInt(document.getElementById("Image_div_img_" + num_img).clientWidth) + 30;
            document.getElementById("Image_div_img_" + num_img_gche).style.left = '-' + decalage_dte + 'px';
            document.getElementById("Image_div_img_" + num_img).style.left = '-' + decalage_dte + 'px';
        }
    } 
    
    alert("normalscreen : " + document.getElementById("Image_div_img_" + num_img).id)

    // Je ne sais pas vraiment à quoi sert cette ligne, mais elle était dans le tuto
    //qui m'a appris à faire le slider ... et à priori elle est utile !!
    evt.preventDefault();


}


Répondre