mercredi 18 février 2015

Detect mouse on touch screen device


I use the following code to detect whether the device is a touch device or not:



var isTouchDevice = 'ontouchstart' in window || navigator.msMaxTouchPoints;

if(isTouchDevice)
{
$('body').addClass('yes-touch');
}
else
{
$('body').addClass('no-touch');
}


I use this to only show :hover states when it is NOT a touch device (as most touch devices interpret a tap as a hover).



.no-touch .element:hover {
color: red;
}


The problem is, one of our PCs in the office is an all-on-one touch screen PC, which means that when using a mouse the hover states don't occur.


Is there a way to work out whether a mouse is being used on a touch screen device? In other words, it should have the no-touch class applied when the mouse is being used and the yes-touch class applied when the touch screen is being used.





Aucun commentaire:

Enregistrer un commentaire