Supporté par ChromeSupporté par FirefoxSupporté par EdgeSupporté par Safari/iOS Touch Events API : Démo HTML5

Mise à jour : 2017-01-22
Cette API permet de gérer les évènements des écrans tactiles multipoints.
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

Notes sur le tuto


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>		

Can I Use touch? Data on support for the touch feature across the major browsers from caniuse.com.