Touch Events API : Démo HTML5
Mise à jour : 2017-01-22
On récupère plusieurs types de coordonnées pour chaque point de contact associés à différents types d'évènements.
Touch Events API
- touches : liste de tous les points de contacts.
- targetTouches : liste de tous les points de contacts liés à un élément.
- changedTouches : liste de toutes les modifications des points de contacts liés à un élément.
- Évènements :
- touchstart : touché.
- touchmove : glissement.
- touchend : relachement.
- touchcancel : déclanché lorsque le touché est annulé par une cause extérieure.
Notes sur le tuto
- Touchez l'écran en plusieurs points simultanément, et faites plusieurs essais successifs.
- Article ancien mais bien documenté et toujours d'actualité sur HTML5 Rocks.
- Table de compatibilité très précise sur quirksmode :
- Test drag and drop multipoints.
- Limitations :
- Les 3 moteurs de rendu ont une façon différente d'invalider le scroll écran, qui est un pré-requis au drag and drop.
- Les évènements restent associés à l'élément initiateur, même déplacé (cf. démo où "touchend" est sur le logo du navigateur et pas sur la boîte), contrairement à Pointer Events.
- Voir aussi :
Exemple de code HTML5
1. Touchez l'écran : <span id="test">...</span><br> <script> document.addEventListener("touchstart", function(event) { test = document.getElementById("test") test.innerHTML = event.touches.length + " point(s) de contact(s)" test.className = "ok" }) </script> <br> 2. Glissez/Lachez les navigateurs dans une zone :<br> <div class="box" id="box1"> <p>Navigateurs compatibles</p> </div> <div style="float:left"><br> <img src="../img/logos/chrome1.png" id="cr" ontouchstart="touchDrag()" ontouchend="touchDrop(this, event)"><br> <img src="../img/logos/firefox1.png" id="ff" ontouchstart="touchDrag()" ontouchend="touchDrop(this, event)"><br> <img src="../img/logos/ie1.png" id="ie" ontouchstart="touchDrag()" ontouchend="touchDrop(this, event)"><br> <img src="../img/logos/safari1.png" id="sf" ontouchstart="touchDrag()" ontouchend="touchDrop(this, event)"> </div> <div class="box" id="box2"> <p>Navigateurs incompatibles</p> </div> <div style="clear:both"></div> <script> function touchDrag(){ document.ontouchmove = function(event){event.preventDefault()} // Webkit document.ontouchstart= function(event){event.preventDefault()} // Mozilla document.body.style.touchAction = "none" // Microsoft } function isInside(boxId, point){ box = boxId.getBoundingClientRect() if (box.left <= point.clientX && point.clientX <= box.right && box.top <= point.clientY && point.clientY <= box.bottom) return true else return false } function touchDrop(target, event){ nav = document.getElementById(target.id) dropPoint = event.changedTouches[0] box1 = document.getElementById("box1") box2 = document.getElementById("box2") if (isInside(box1, dropPoint)) box1.appendChild(nav) else if (isInside(box2, dropPoint)) box2.appendChild(nav) document.ontouchmove = null // Webkit document.ontouchstart= null // Firefox document.body.style.touchAction = "auto" // Microsoft } </script>
Démonstration du résultat HTML5
1. Touchez l'écran : ...
2. Glissez/Lachez les navigateurs dans une zone :
Navigateurs compatibles
Navigateurs incompatibles
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)<script src="_html5detect.js"></script> <script> isAttributeSpecified("cr", "ontouchstart") isAttributeSpecified("cr", "ontouchend") </script>