Detecting touch screen devices with Javascript

Question

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.

Answer 1

May these will help you:

• iPhone Touch Events in JavaScript
• Does css hover work on mobile devices?
• What are some alternatives to “hover” on touch-based devices?

Answer 2

+1 for doing hover and click both. One other way could be using CSS media queries and using some styles only for smaller screens / mobile devices, which are the ones most likely to have touch / tap functionality. So if you you have some specific styles via CSS, and from jQuery you check those elements for the mobile device style properties you could hook into them to write you mobile specific code.

See here: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

Answer 3

If you want to use the tap only on those devices, I guess you can detect them using the Server Variables which gives you all the information from where the client is connecting from. Then you could alter your js code to do whatever you want to do in each case.

Answer 4

For iPad development I am using:

  if (window.Touch)
  {
    alert("touchy touchy");
  }
  else
  {
    alert("no touchy touchy");
  }

I can then selectively bind to the touch based events (eg ontouchstart) or mouse based events (eg onmousedown). I haven't yet tested on android.