Pointer Events API : Démo HTML5
Mise à jour : 2017-01-22
Pointer Events API
- pointerId : identifiant.
- width : largeur du point de contact.
- height : hauteur du point de contact.
- pressure : pression normalisé [0, 1].
- tiltX : angle d'inclinaison en X, par rapport à la normal (perpendiculaire) de l'écran.
- tiltY : angle d'inclinaison en Y, par rapport à la normal (perpendiculaire) de l'écran.
- pointerType : type de pointeur (souris, stylo, doigt).
- isPrimary : prévalence du pointeur.
- Évènements :
- pointerover : survol (mouseover).
- pointerenter : entrée en survol (mouseenter).
- pointerdown : cliqué/touché (mousedown/touchstart).
- pointermove : glissement (mousemove/touchmove).
- pointerup : relâchement (mouseup/touchend).
- pointercancel : déclanché lorsque l'action du pointeur est annulé par une cause extérieure (touchcancel).
- pointerout : sortie en survol (mouseout).
- pointerleave : sortie glissée (mouseleave).
- gotpointercapture : réception d'un des évènements ci-dessus.
- lostpointercapture : déclanché lorsqu'il n'est plus possible de recevoir un des évènements ci-dessus (pointeur non actif et hors zone de survol).
Notes sur le tuto
- Interagissez avec l'écran par le moyen de votre choix (souris, stylo, doigt).
- L'utilisation de "preventDefault()" dans la fonction "pointerDrop" permet de ne pas activer l'objet déplacé, si celui a une action associée.
- Limitations :
- Seul IE/Edge supporte cette spécification, qui était préfixée sous IE 10.
- Les évènements restent associés à l'élément initiateur, tant qu'il n'est pas déplacé, contrairement à Touch Events.
- "pointerout" et "pointerleave" semblent redondants.
- Article et démo en anglais sur le blog MSDN.
- Voir aussi :
Exemple de code HTML5
1. Pointez l'écran :<br> <span id="test">...</span><br> <script> document.addEventListener("pointerdown", function(event) { test = document.getElementById("test") test.innerHTML = "Pointer Id = " + event.pointerId + "<br>Width = " + event.width + "<br>Height = " + event.height + "<br>Pressure = " + event.pressure + "<br>Tilt X = " + event.tiltX + "<br>Tilt Y = " + event.tiltY + "<br>Pointer Type = " + event.pointerType + "<br>Is Primary = " + event.isPrimary test.className = "ok" }) </script> <br> 2. Glissez/Lachez les navigateurs : <span id="test2">...</span><br> <div class="box" id="box" onpointerover="alert('over')"> <p>Navigateurs compatibles</p> </div> <div style="float:left"><br> <img src="../img/logos/chrome1.png" id="cr" onpointerdown="pointerDrag(this, event)" onpointerup="pointerDrop(this, event)" onpointerout="document.getElementById('test2').innerHTML='out'" onpointerenter="document.getElementById('test2').innerHTML='enter'" ><br> <img src="../img/logos/firefox1.png" id="ff" onpointerdown="pointerDrag(this, event)"><br> <img src="../img/logos/ie1.png" id="ie" onpointerdown="pointerDrag(this, event)"><br> <img src="../img/logos/safari1.png" id="sf" onpointerdown="pointerDrag(this, event)"> </div> <div class="box" onpointerup="pointerDrop(this, event)"> <p>Navigateurs incompatibles</p> </div> <div style="clear:both"></div> <script> function pointerDrag(target, event){ // event.dataTransfer.setData("text", target.id); // document.onpointermove = function(event){event.preventDefault()} // document.body.style.touchAction = "none" // Microsoft } function pointerDrop(target, event){ alert("up") navId = event.dataTransfer.getData("text"); target.appendChild(document.getElementById(navId)); event.preventDefault(); // document.onpointermove = null // document.body.style.touchAction = "auto" // Microsoft } </script>
Démonstration du résultat HTML5
1. Pointez l'écran :
...
2. Glissez/Lachez les navigateurs : ...
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("logo", "onpointerover") isAttributeSpecified("logo", "onpointerenter") isAttributeSpecified("logo", "onpointerdown") isAttributeSpecified("logo", "onpointeremove") isAttributeSpecified("logo", "onpointerup") isAttributeSpecified("logo", "onpointercancel") isAttributeSpecified("logo", "onpointerout") isAttributeSpecified("logo", "onpointerleave") isAttributeSpecified("logo", "ongotpointercapture") isAttributeSpecified("logo", "onlostpointercapture") </script>