Quel est le meilleur moyen de détecter un périphérique à écran tactile à l'aide de JavaScript?
J'ai écrit un plug-in jQuery à utiliser sur les ordinateurs de bureau et les appareils mobiles. Je me demandais s'il était possible, avec JavaScript, de détecter si le périphérique est doté d'un écran tactile. J'utilise jquery-mobile.js pour détecter les événements sur l'écran tactile. Cela fonctionne sous iOS, Android etc., mais j'aimerais également écrire des instructions conditionnelles en fonction du caractère tactile du périphérique de l'utilisateur. écran.
Est-ce possible?
Mise à jour: Veuillez lire réponse de blmstr ci-dessous avant d'extraire une bibliothèque de détection d'entités complète dans votre projet. La détection de la prise en charge tactile réelle est plus complexe et Modernizr ne couvre qu'un cas d'utilisation élémentaire.
Modernizr est un excellent moyen léger de détecter tous les types de fonctionnalités sur n’importe quel site.
Il ajoute simplement des classes à l'élément html pour chaque fonctionnalité.
Vous pouvez ensuite cibler facilement ces fonctionnalités dans CSS et JS. Par exemple:
html.touch div {
width: 480px;
}
html.no-touch div {
width: auto;
}
Et Javascript (exemple jQuery):
$('html.touch #popup').hide();
Avez-vous essayé d'utiliser cette fonction? (C’est la même chose que Modernizr utilisait auparavant.)
function is_touch_device() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
UPDATE 1
document.createEvent("TouchEvent") ont commencé à retourner true dans le dernier chrome (v. 17). Modernizr a mis à jour cela il y a un moment. Vérifiez le test Modernizr ici .
Mettez à jour votre fonction comme ceci pour la faire fonctionner:
function is_touch_device() {
return 'ontouchstart' in window;
}
UPDATE 2
J'ai trouvé que ce qui précède ne fonctionnait pas sur IE10 (en renvoyant false sur MS Surface). Voici le correctif:
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| 'onmsgesturechange' in window; // works on IE10 with some false positives
};
UPDATE 3
'onmsgesturechange' in window retournera true dans certaines IE versions de bureau, donc ce n'est pas fiable. Cela fonctionne un peu plus fiable:
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
UPDATE 2018
Le temps passe et il existe de nouvelles et meilleures façons de tester cela. J'ai essentiellement extrait et simplifié la méthode de vérification de Modernizr:
function is_touch_device() {
var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
var mq = function(query) {
return window.matchMedia(query).matches;
}
if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
return true;
}
// include the 'heartz' as a way to have a non matching MQ to help terminate the join
// https://git.io/vznFH
var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
return mq(query);
}
Ici, ils utilisent la fonctionnalité de requête multimédia non standard touch-enabled, qui, à mon avis, est un peu bizarre et constitue une mauvaise pratique. Mais bon, dans le monde réel, je suppose que ça marche. À l'avenir (lorsqu'elles seront supportées par tous), ces fonctionnalités d'interrogation multimédia pourraient vous donner les mêmes résultats: pointer et hover.
Découvrez le source de la façon dont Modernizr le fait .
Pour un bon article qui explique les problèmes de détection tactile, voir: Stu Cox: Vous ne pouvez pas détecter un écran tactile .
Comme Modernizr ne détecte pas IE10 sur Windows Phone 8/WinRT, une solution simple, multi-navigateurs, est la suivante:
var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;
Vous devez uniquement vérifier une fois, car le périphérique ne prend pas en charge de manière soudaine ou non, alors stockez-le simplement dans une variable afin de pouvoir l'utiliser plusieurs fois plus efficacement.
En utilisant tous les commentaires ci-dessus, j'ai assemblé le code suivant qui répond à mes besoins:
var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));
J'ai testé cela sur iPad, Android (Navigateur et Chrome), Blackberry Playbook, iPhone 4s, Windows Phone 8, IE 10, IE 8, IE 10 (Windows 8 avec écran tactile), Opera, Chrome et Firefox.
Il échoue actuellement sur Windows Phone 7 et je n'ai pas encore trouvé de solution pour ce navigateur.
J'espère que quelqu'un trouve cela utile.
J'aime celui-ci:
function isTouchDevice(){
return typeof window.ontouchstart !== 'undefined';
}
alert(isTouchDevice());
Si vous utilisez Modernizr , il est très facile d'utiliser Modernizr.touch comme mentionné précédemment.
Cependant, je préfère utiliser une combinaison de Modernizr.touch et de tests d'agent utilisateur, juste pour être en sécurité.
var deviceAgent = navigator.userAgent.toLowerCase();
var isTouchDevice = Modernizr.touch ||
(deviceAgent.match(/(iphone|iPod|ipad)/) ||
deviceAgent.match(/(Android)/) ||
deviceAgent.match(/(iemobile)/) ||
deviceAgent.match(/iphone/i) ||
deviceAgent.match(/ipad/i) ||
deviceAgent.match(/iPod/i) ||
deviceAgent.match(/blackberry/i) ||
deviceAgent.match(/bada/i));
if (isTouchDevice) {
//Do something touchy
} else {
//Can't touch this
}
Si vous n'utilisez pas Modernizr, vous pouvez simplement remplacer la fonction Modernizr.touch ci-dessus par ('ontouchstart' in document.documentElement)
Notez également que le test de l'agent utilisateur iemobile vous donnera une gamme plus étendue de périphériques mobiles Microsoft détectés que Windows Phone.
Nous avons essayé l’implémentation modernizr, mais la détection des événements tactiles n’est plus cohérente (IE 10 possède des événements tactiles sur le bureau Windows, IE 11 fonctionne car il a supprimé des événements tactiles et ajouté une API de pointeur).
Nous avons donc décidé d’optimiser le site Web en tant que site tactile tant que nous ne savons pas quel type de saisie a l’utilisateur. Ceci est plus fiable que toute autre solution.
Nos recherches indiquent que la plupart des utilisateurs d'ordinateurs de bureau bougent la souris sur l'écran avant de cliquer pour que nous puissions les détecter et modifier leur comportement avant de pouvoir cliquer ou survoler.
Ceci est une version simplifiée de notre code:
var isTouch = true;
window.addEventListener('mousemove', function mouseMoveDetector() {
isTouch = false;
window.removeEventListener('mousemove', mouseMoveDetector);
});
Il y a quelque chose de mieux que de vérifier s'ils ont un écran tactile, c'est de vérifier s'ils l'utilisent, et en plus, c'est plus facile à vérifier.
if (window.addEventListener) {
var once = false;
window.addEventListener('touchstart', function(){
if (!once) {
once = true;
// Do what you need for touch-screens only
}
});
}
Depuis l'introduction de fonctionnalités de média d'interaction , vous pouvez simplement faire:
if(window.matchMedia("(any-pointer: coarse)").matches) {
// touchscreen
}
https://www.w3.org/TR/mediaqueries-4/#descdef-media-any-pointer
Je l'ai atteint comme ça;
function isTouchDevice(){
return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}
if(isTouchDevice()===true) {
alert('Touch Device'); //your logic for touch device
}
else {
alert('Not a Touch Device'); //your logic for non touch device
}
Celui-ci fonctionne bien même dans les tablettes Windows Surface !!!
function detectTouchSupport {
msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture,
touchSupport = (( "ontouchstart" in window ) || msGesture || window.DocumentTouch && document instanceof DocumentTouch);
if(touchSupport) {
$("html").addClass("ci_touch");
}
else {
$("html").addClass("ci_no_touch");
}
}
La plus grande difficulté à détecter le toucher concerne les appareils hybrides prenant en charge le toucher et le trackpad/souris. Même si vous êtes en mesure de détecter correctement si le périphérique de l'utilisateur prend en charge la technologie tactile, vous devez réellement détecter le périphérique d'entrée que l'utilisateur utilise actuellement. Il y a une description détaillée de ce défi et ne solution possible ici .
Fondamentalement, l’approche permettant de déterminer si un utilisateur vient de toucher l’écran ou d’utiliser une souris/un trackpad consiste à enregistrer un événement touchstart et mouseover sur la page:
document.addEventListener('touchstart', functionref, false) // on user tap, "touchstart" fires first
document.addEventListener('mouseover', functionref, false) // followed by mouse event, ie: "mouseover"
Une action tactile déclenchera ces deux événements, bien que le premier (touchstart) soit toujours le premier sur la plupart des périphériques. En comptant donc sur cette séquence d'événements prévisible, vous pouvez créer un mécanisme qui ajoute ou supprime de manière dynamique une classe can-touch à la racine du document afin de refléter le courant actuel type d'entrée de l'utilisateur à ce moment sur le document:
;(function(){
var isTouch = false //var to indicate current input type (is touch versus no touch)
var isTouchTimer
var curRootClass = '' //var indicating current document root class ("can-touch" or "")
function addtouchclass(e){
clearTimeout(isTouchTimer)
isTouch = true
if (curRootClass != 'can-touch'){ //add "can-touch' class if it's not already present
curRootClass = 'can-touch'
document.documentElement.classList.add(curRootClass)
}
isTouchTimer = setTimeout(function(){isTouch = false}, 500) //maintain "istouch" state for 500ms so removetouchclass doesn't get fired immediately following a touch event
}
function removetouchclass(e){
if (!isTouch && curRootClass == 'can-touch'){ //remove 'can-touch' class if not triggered by a touch event and class is present
isTouch = false
curRootClass = ''
document.documentElement.classList.remove('can-touch')
}
}
document.addEventListener('touchstart', addtouchclass, false) //this event only gets called when input type is touch
document.addEventListener('mouseover', removetouchclass, false) //this event gets called when input type is everything from touch to mouse/ trackpad
})();
Plus de détails ici .
J'ai utilisé des morceaux du code ci-dessus pour détecter si les contacts étaient tactiles, afin que mes iframes fancybox apparaissent sur les ordinateurs de bureau et non au toucher. J'ai remarqué que Opera Mini pour Android 4.0 était toujours en cours d'enregistrement en tant qu'appareil non tactile lors de l'utilisation du code de blmstr seul. (Quelqu'un sait-il pourquoi?)
J'ai fini par utiliser:
<script>
$(document).ready(function() {
var ua = navigator.userAgent;
function is_touch_device() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
if ((is_touch_device()) || ua.match(/(iPhone|iPod|iPad)/)
|| ua.match(/BlackBerry/) || ua.match(/Android/)) {
// Touch browser
} else {
// Lightbox code
}
});
</script>
J'éviterais d'utiliser la largeur de l'écran pour déterminer si un périphérique est un périphérique tactile. Il existe des écrans tactiles beaucoup plus grands que 699px, pensez à Windows 8. Navigatior.userAgent peut être agréable pour remplacer les faux postifs.
Je recommanderais de vérifier ce numéro sur Modernizr.
Souhaitez-vous vérifier si le périphérique prend en charge les événements tactiles ou s'il s'agit d'un périphérique tactile? Malheureusement, ce n'est pas la même chose.
Non, ce n'est pas possible Les excellentes réponses données ne sont que partielles, car toute méthode produira des faux positifs et des faux négatifs. Même le navigateur ne sait pas toujours si un écran tactile est présent, en raison des API de système d'exploitation, et le fait peut changer au cours d'une session du navigateur, en particulier avec les arrangements de type KVM.
Voir plus de détails dans cet excellent article:
http://www.stucox.com/blog/you-cant-detect-a-touchscreen/
L'article vous suggère de reconsidérer les hypothèses qui vous poussent à détecter les écrans tactiles, elles sont probablement fausses. (J'ai vérifié ma propre application et mes hypothèses étaient en fait erronées!)
L'article conclut:
Pour les mises en page, supposons que tout le monde a un écran tactile. Les utilisateurs de souris peuvent utiliser des commandes d'interface utilisateur volumineuses beaucoup plus facilement que les utilisateurs tactiles ne peuvent utiliser de petites commandes. La même chose vaut pour les États en vol stationnaire.
Pour les événements et les interactions, supposons que tout le monde puisse avoir un écran tactile. Implémentez les interactions clavier, souris et tactile les unes à côté des autres, en veillant à ce qu'aucun ne se bloque.
Regardez ceci post , cela donne un très bon extrait de code pour savoir quoi faire lorsque des périphériques tactiles sont détectés ou quoi faire si un événement touchstart est appelé:
$(function(){
if(window.Touch) {
touch_detect.auto_detected();
} else {
document.ontouchstart = touch_detect.surface;
}
}); // End loaded jQuery
var touch_detect = {
auto_detected: function(event){
/* add everything you want to do onLoad here (eg. activating hover controls) */
alert('this was auto detected');
activateTouchArea();
},
surface: function(event){
/* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
alert('this was detected by touching');
activateTouchArea();
}
}; // touch_detect
function activateTouchArea(){
/* make sure our screen doesn't scroll when we move the "touchable area" */
var element = document.getElementById('element_id');
element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
/* modularize preventing the default behavior so we can use it again */
event.preventDefault();
}
Beaucoup d'entre eux fonctionnent mais nécessitent soit jQuery, soit des linters javascript qui se plaignent de la syntaxe. Considérant que votre question initiale demande un moyen "JavaScript" (pas jQuery, pas Modernizr) de résoudre ce problème, voici une fonction simple qui fonctionne à chaque fois. C'est aussi à peu près aussi minime que possible.
function isTouchDevice() {
return !!window.ontouchstart;
}
console.log(isTouchDevice());
Un dernier avantage que je mentionnerai est que ce code est agnostique pour les frameworks et les appareils. Prendre plaisir!
Il semble que Chrome 24 prend désormais en charge les événements tactiles, probablement pour Windows 8. Le code publié ici ne fonctionne donc plus. Au lieu d'essayer de détecter si le toucher est pris en charge par le navigateur, je lie maintenant les événements de contact et de clic et veille à ce qu'un seul soit appelé:
myCustomBind = function(controlName, callback) {
$(controlName).bind('touchend click', function(e) {
e.stopPropagation();
e.preventDefault();
callback.call();
});
};
Et puis l'appelant:
myCustomBind('#mnuRealtime', function () { ... });
J'espère que cela t'aides !
Vous pouvez installer le modernisateur et utiliser un événement tactile simple. Ceci est très efficace et fonctionne sur tous les appareils sur lesquels je l'ai testé, y compris la surface de la fenêtre!
J'ai créé un jsFiddle
function isTouchDevice(){
if(Modernizr.hasEvent('touchstart') || navigator.userAgent.search(/Touch/i) != -1){
alert("is touch");
return true;
}else{
alert("is not touch");
return false;
}
}
jQuery v1.11.3
Il y a beaucoup de bonnes informations dans les réponses fournies. Mais récemment, j'ai passé beaucoup de temps à essayer de tout lier pour en faire une solution efficace permettant d'accomplir deux choses:
- Détecter que le périphérique utilisé est un périphérique de type écran tactile.
- Détecter que le périphérique a été exploité.
Outre ce post et Détection des appareils à écran tactile avec Javascript , j'ai trouvé ce post de Patrick Lauke extrêmement utile: https://hacks.mozilla.org/2013/04/detecting-touch- c'est-le-pourquoi-pas-le-comment /
Voici le code ...
$(document).ready(function() {
//The page is "ready" and the document can be manipulated.
if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0))
{
//If the device is a touch capable device, then...
$(document).on("touchstart", "a", function() {
//Do something on tap.
});
}
else
{
null;
}
});
Important! La méthode *.on( events [, selector ] [, data ], handler ) doit avoir un sélecteur, généralement un élément, capable de gérer l'événement "touchstart" ou tout autre élément similaire. événement associé à des touches. Dans ce cas, il s'agit de l'élément lien hypertexte "a".
Désormais, vous n'avez pas besoin de manipuler le clic de souris habituel en JavaScript, car vous pouvez utiliser CSS pour gérer ces événements à l'aide de sélecteurs pour le lien hypertexte "un" élément, comme ceci:
/* unvisited link */
a:link
{
}
/* visited link */
a:visited
{
}
/* mouse over link */
a:hover
{
}
/* selected link */
a:active
{
}
Remarque: il existe également d'autres sélecteurs ...
J'ai également eu beaucoup de mal avec différentes options sur la façon de détecter en Javascript si la page est affichée sur un appareil à écran tactile ou non. Pour l’instant, à notre connaissance, il n’existe pas d’option réelle permettant de la détecter correctement. Les navigateurs rapportent les événements tactiles sur les ordinateurs de bureau (car le système d'exploitation est peut-être tactile), ou certaines solutions ne fonctionnent pas sur tous les appareils mobiles.
Finalement, j'ai réalisé que je suivais la mauvaise approche depuis le début: si ma page devait ressembler à celle des appareils tactiles et non tactiles, je n'aurais peut-être pas à me soucier de détecter la propriété: mon scénario était désactiver les info-bulles sur les boutons des appareils tactiles, car ils entraînent des tapotements doubles où je voulais activer le bouton en un seul tapotement.
Ma solution était de refactor la vue de sorte qu'aucune info-bulle ne soit nécessaire sur un bouton, et à la fin je n'avais pas besoin de détecter le périphérique tactile à partir de Javascript avec des méthodes qui tous ont leur inconvénients.
Tous les navigateurs pris en charge sauf Firefox pour le bureau toujours TRUE à cause de Firefox pour la conception réactive pour le soutien du bureau, même si vous cliquez sur le bouton tactile!
J'espère que Mozilla corrigera cela dans la prochaine version.
J'utilise Firefox 28 desktop.
function isTouch()
{
return !!("ontouchstart" in window) || !!(navigator.msMaxTouchPoints);
}
J'utilise:
if(jQuery.support.touch){
alert('Touch enabled');
}
dans jQuery mobile 1.0.1
Le problème
En raison des dispositifs hybrides qui combinent les entrées tactiles et souris, vous devez pouvoir dynamiquement changer l’état/la variable qui contrôle si un morceau de code devrait s’exécuter si l’utilisateur est un utilisateur tactile ou non.
Les appareils tactiles déclenchent également mousemove du robinet.
Solution
- Supposons que le toucher soit faux lors du chargement.
- Attendez qu'un événement
touchstartsoit déclenché, puis définissez-le sur true. - Si touchstart a été déclenché, ajoutez un gestionnaire de déplacement de souris.
- Si le délai entre le déclenchement de deux événements de souris est inférieur à 20 ms, supposons qu'ils utilisent une souris en tant qu'entrée. Supprimez l'événement car il n'est plus nécessaire et mousemove est un événement coûteux pour les souris.
- Dès que touchstart est à nouveau activé (l'utilisateur est revenu à l'aide de touch), la variable est remise à true. Et répétez le processus pour le déterminer de manière dynamique. Si, par miracle, Mousemove est renvoyé deux fois au toucher de manière absurde (dans mes tests, il est pratiquement impossible de le faire en moins de 20 ms), le prochain point de contact le rétablira.
Testé sur Safari iOS et Chrome pour Android.
Remarque: vous n'êtes pas sûr à 100% des événements de pointeur pour MS Surface, etc.
const supportsTouch = 'ontouchstart' in window;
let isUsingTouch = false;
// `touchstart`, `pointerdown`
const touchHandler = () => {
isUsingTouch = true;
document.addEventListener('mousemove', mousemoveHandler);
};
// use a simple closure to store previous time as internal state
const mousemoveHandler = (() => {
let time;
return () => {
const now = performance.now();
if (now - time < 20) {
isUsingTouch = false;
document.removeEventListener('mousemove', mousemoveHandler);
}
time = now;
}
})();
// add listeners
if (supportsTouch) {
document.addEventListener('touchstart', touchHandler);
} else if (navigator.maxTouchPoints || navigator.msMaxTouchPoints) {
document.addEventListener('pointerdown', touchHandler);
}
La réponse pratique semble être celle qui considère le contexte:
1) Site public (pas de login)
Codez l’interface utilisateur pour pouvoir utiliser les deux options ensemble.
2) Login site
Indiquez si un déplacement de la souris s’est produit sur le formulaire de connexion et enregistrez-le dans une entrée masquée. La valeur est transmise avec les informations d'identification de connexion et ajoutée à l'utilisateur session, afin qu'elle puisse être utilisée pendant la durée de la session.
Jquery à ajouter à la page de connexion uniquement:
$('#istouch').val(1); // <-- value will be submitted with login form
if (window.addEventListener) {
window.addEventListener('mousemove', function mouseMoveListener(){
// Update hidden input value to false, and stop listening
$('#istouch').val(0);
window.removeEventListener('mousemove', mouseMoveListener);
});
}
(+ 1 à @Dave Burt et +1 à @ Martin Lantzsch pour leurs réponses)
var isTouchScreen = 'createTouch' in document;
ou
var isTouchScreen = 'createTouch' in document || screen.width <= 699 ||
ua.match(/(iPhone|iPod|iPad)/) || ua.match(/BlackBerry/) ||
ua.match(/Android/);
serait une vérification plus approfondie, je suppose.
Vous pouvez utiliser le code suivant:
function isTouchDevice() {
var el = document.createElement('div');
el.setAttribute('ongesturestart', 'return;'); // or try "ontouchstart"
return typeof el.ongesturestart === "function";
}
Source: détection de la navigation tactile et @ mplungjan post .
La solution ci-dessus était basée sur détection du support d'événements sans recherche de navigateur article.
Vous pouvez vérifier les résultats à l'adresse suivante page de test .
Veuillez noter que le code ci-dessus vérifie uniquement si le navigateur prend en charge le toucher, pas l'appareil. Donc, si vous avez un ordinateur portable avec écran tactile, votre navigateur peut ne pas prendre en charge les événements tactiles. Le récent Chrome prend en charge les événements tactiles , mais les autres navigateurs ne le peuvent pas.
Vous pouvez aussi essayer:
if (document.documentElement.ontouchmove) {
// ...
}
mais cela peut ne pas fonctionner sur les appareils iPhone.
$.support.touch ? "true" : "false";
Cela semble bien fonctionner pour moi jusqu'à présent:
//Checks if a touch screen
is_touch_screen = 'ontouchstart' in document.documentElement;
if (is_touch_screen) {
// Do something if a touch screen
}
else {
// Not a touch screen (i.e. desktop)
}
Petite note à ceux qui pourraient être tentés d’écrire window.ontouchstart !== undefined -> veuillez utiliser la réponse micnic, car undefined n’est pas un mot clé en JavaScript. Gros problème si develop écrit quelque chose comme:
undefined = window.ontouchstart;
Les développeurs peuvent créer tout ce qu'ils veulent, mais vous pouvez également vérifier si window.ontouchstart = myNonExistingWord;
Sans manquer de respect à ceux qui ont donné cette réponse: à peu près sûr que j'ai écrit cela dans mon code aussi;)
var isTouchDevice =
(('ontouchstart' in window) ||
(navigator.MaxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0));
if(!isTouchDevice){
/* Code for touch device /*
}else{
/* Code for non touch device */
}
S'amuser !
Étendue jQuery support objet:
jQuery.support.touch = 'ontouchend' in document;
Et maintenant, vous pouvez le vérifier n'importe où, comme ceci:
if( jQuery.support.touch )
// do touch stuff
Lorsqu'une souris est connectée, on peut supposer, avec un taux de frappe assez élevé (je dirais pratiquement à 100%), que l'utilisateur déplace la souris au moins une petite distance après que la page est prête - sans aucun clic. Le mécanisme ci-dessous détecte cela. Si elle est détectée, je considère cela comme un signe de manque d'assistance tactile ou, si elle est prise en charge, d'importance mineure lorsqu'une souris est utilisée. Touch-device est supposé s'il n'est pas détecté.
EDIT Cette approche peut ne pas convenir à tous les objectifs. Il peut être utilisé pour contrôler les fonctionnalités activées en fonction de l'interaction de l'utilisateur sur la page chargée, par exemple une visionneuse d'images. Le code ci-dessous laissera également l'événement mousemove lié aux périphériques sans souris, comme il se présente maintenant. D'autres approches peuvent être meilleures.
En gros, ça va comme ça (désolé pour jQuery, mais similaire en Javascript pur):
var mousedown, first, second = false;
var ticks = 10;
$(document).on('mousemove', (function(e) {
if(UI.mousechecked) return;
if(!first) {
first = e.pageX;
return;
}
if(!second && ticks-- === 0) {
second = e.pageX;
$(document).off('mousemove'); // or bind it to somewhat else
}
if(first && second && first !== second && !mousedown){
// set whatever flags you want
UI.hasmouse = true;
UI.touch = false;
UI.mousechecked = true;
}
return;
}));
$(document).one('mousedown', (function(e) {
mousedown = true;
return;
}));
$(document).one('mouseup', (function(e) {
mousedown = false;
return;
}));