Le plus gros problème avec la détection du toucher concerne les appareils hybrides qui prennent 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 le toucher, ce que vous devez vraiment faire est de 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 une solution possible ici .
Fondamentalement, l'approche pour déterminer si un utilisateur vient de toucher l'écran ou a plutôt utilisé une souris / un pavé tactile consiste à enregistrer à la fois un événement touchstart
et un mouseover
événement 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 appareils. Ainsi, en comptant sur cette séquence d'événements prévisible, vous pouvez créer un mécanisme qui ajoute ou supprime dynamiquement une can-touch
classe à la racine du document pour refléter le type d'entrée actuel 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 .