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>