In Javascript/jQuery, how can I detect if the client device has a mouse?
I've got a site that slides up a little info panel when the user hovers their mouse over an item. I'm using jQuery.hoverIntent to detect the hover, but this obviously doesn't work on touchscreen devices like iPhone/iPad/Android. So on those devices I'd like to revert to tap to show the info panel.
Note: Just because a device supports touch events doesn't necessarily mean that it is exclusively a touch screen device. Many devices (such as my Asus Zenbook) support both click and touch events, even when they doen't have any actual touch input mechanisms. When designing for touch support, always include click event support and never assume any device is exclusively one or the other.
For my first post/comment: We all know that 'touchstart' is triggered before click. We also know that when user open your page he or she will: 1) move the mouse 2) click 3) touch the screen (for scrolling, or ... :) )
Let's try something :
//--> Start: jQuery
//<-- End: jQuery
Have a nice day!
In jQuery Mobile you can simply do:
Don't know why this is so undocumented.. but it is crossbrowser safe (latest 2 versions of current browsers).
Works every where !!
This works for me:
If you use Modernizr, it is very easy to use
Modernizr.touch
as mentioned earlier.However, I prefer using a combination of
Modernizr.touch
and user agent testing, just to be safe.If you don't use Modernizr, you can simply replace the
Modernizr.touch
function above with('ontouchstart' in document.documentElement)
Also note that testing the user agent
iemobile
will give you broader range of detected Microsoft mobile devices thanWindows Phone
.Also see this SO question