En test sur ChromeEn test sur FirefoxEn test sur EdgeNon supporté par Safari/iOS Pointer Events API : Démo HTML5

Mise à jour : 2017-01-22
Cette API permet de fédérer la gestion des interactions écran (souris, stylo, doigt).

Pointer Events API

Notes sur le tuto


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>		

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