You Can’t Detect A Touchscreen
Whatever you may think, it currently isn’t possible to reliably detect whether or not the current device has a touchscreen, from within the browser.
And it may be a long time before you can.
Let me explain why… - Stu Cox, http://www.stucox.com
I highly recommend reading the entire article. The short answer is you should always design to allow websites to have BOTH touch and mouse interactions.
Stu Cox does mention you can test to for interactions (which requires an event to trigger the test) which is far from ideal.
Modernizr can’t even save us
My reaction was Modernizr.js can detect a if a browser supports touch events… but after a quick check, its not infallible.
The Modernizr.touch test only indicates if the browser supports touch events, which does not necessarily reflect a touchscreen device. For example, Palm Pre / WebOS (touch) phones do not support touch events and thus fail this test. Additionally, Chrome (desktop) used to lie about its support on this, but that has since been rectified. Modernizr also tests for Multitouch Support via a media query, which is how Firefox 4 exposes that for Windows 7 tablets. For more info, see the Modernizr touch tests. - Modernizr.com
You can bind events to touch and then fallback to mouse events with modernizr which is the closest you will get. You don’t even need to use modernizr but alas, even this isn’t perfect. Stu explains that Windows 8 derp can report the presence of a touch screen when there is none.