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

User · Answer

Found testing for window Touch didn t work on android but this does    function is touch device       return     ontouchstart  in window       See article  What  39 s the best way to detect a   39 touch screen  39  device using JavaScript

User · Answer

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   var deviceAgent   navigator userAgent toLowerCase     var isTouchDevice   Modernizr touch      deviceAgent match   iphone ipod ipad       deviceAgent match   android         deviceAgent match   iemobile        deviceAgent match  iphone i      deviceAgent match  ipad i      deviceAgent match  ipod i      deviceAgent match  blackberry i      deviceAgent match  bada i     if  isTouchDevice              Do something touchy       else             Can t touch this         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 than Windows Phone   Also see this SO question

User · Answer

var isTouchDevice    ontouchstart  in document documentElement    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

User · Answer

This works for me   function isTouchDevice        return true      ontouchstart  in window    window DocumentTouch  amp  amp  document instanceof DocumentTouch

User · Answer

As already mentioned  a device may support both mouse and touch input  Very often  the question is not  quot what is supported quot  but  quot what is currently used quot   For this case  you can simply register mouse events  including the hover listener  and touch events alike  element addEventListener  touchstart  onTouchStartCallback false    element addEventListener  onmousedown  onMouseDownCallback false         JavaScript should automatically call the correct listener based on user input  So  in case of a touch event  onTouchStartCallback will be fired  emulating your hover code  Note that a touch may fire both kinds of listeners  touch and mouse  However  the touch listener goes first and can prevent subsequent mouse listeners from firing by calling event preventDefault    function onTouchStartCallback ev           Call preventDefault   to prevent any further handling     ev preventDefault        your code       Further reading here

User · Answer

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  var hasTouchCapabilities    ontouchstart  in window  amp  amp   navigator maxTouchPoints    navigator msMaxTouchPoints   var isTouchDevice   hasTouchCapabilities    maybe   nope      attach a once called event handler to window    window  one  touchstart mousemove click  function e        if   isTouchDevice      maybe   amp  amp  e type      touchstart            isTouchDevice    yes            lt -- End  jQuery  Have a nice day

User · Answer

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 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

User · Answer

return    ontouchstart  in window            navigator maxTouchPoints  gt  0            navigator msMaxTouchPoints  gt  0      Reason for using maxTouchPoints alongwith msMaxTouchPoints      Microsoft has stated that starting with Internet Explorer 11    Microsoft vendor prefixed version of this property  msMaxTouchPoints    may be removed and recommends using maxTouchPoints instead    Source   http   ctrlq org code 19616-detect-touch-screen-javascript

User · Answer

In jQuery Mobile you can simply do     support touch   Don t know why this is so undocumented   but it is crossbrowser safe  latest 2 versions of current browsers

User · Answer

Wrote this for one of my sites and probably is the most foolproof solution  Especially since even Modernizr can get false positives on touch detection   If you re using jQuery    window  one     mouseover   function        Modernizr touch   false     Add this line if you have Modernizr        html   removeClass  touch   addClass  mouse               or just pure JS     window onmouseover   function         window onmouseover   null      document getElementsByTagName  html   0  className      mouse

User · Answer

I have tested following code mentioned above in the discussion   function is touch device         return     ontouchstart  in window        works on android Mozilla  chrome  Opera  android default browser and safari on iphone     all positive      seems solid for me

User · Answer

Google Chrome seems to return false positives on this one   var isTouch    ontouchstart  in document documentElement    I suppose it has something to do with its ability to  emulate touch events   F12 -  settings at lower right corner -   overrides  tab -  last checkbox   I know it s turned off by default but that s what I connect the change in results with  the  in  method used to work in Chrome   However  this seems to be working  as far as I have tested    var isTouch       undefined     typeof document documentElement ontouchstart     All browsers I ve run that code on state the typeof is  object  but I feel more certain knowing that it s whatever but undefined  -   Tested on IE7  IE8  IE9  IE10  Chrome 23 0 1271 64  Chrome for iPad 21 0 1180 80 and iPad Safari  It would be cool if someone made some more tests and shared the results

User · Answer

if   ontouchstart  in window    navigator msMaxTouchPoints        isTouch   true    else       isTouch   false      Works every where

User · Answer

A helpful blog post on the subject  linked to from within the Modernizr source for detecting touch events   Conclusion  it s not possible to reliably detect touchscreen devices from Javascript   http   www stucox com blog you-cant-detect-a-touchscreen

User · Answer

I use   if jQuery support touch       alert  Touch enabled        in jQuery mobile 1 0 1

User · Answer

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

[javascript] Detecting touch screen devices with Javascript

Examples related to javascript

Examples related to jquery

Examples related to iphone

Examples related to android