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.

Why can't you do both? Is the tap functionality undesirable in non-touchscreen devices? — EMPraptor, Oct 20 '10 at 04:48
Since some newer devices don't support `:hover`, it's probably better (when coding one stylesheet for multiple devices) to use `:hover` for purely cosmetic purposes. — drudge, Oct 20 '10 at 04:51
@empraptor: good point - yes I could do that. However... we were also thinking of always showing the panel on touchscreen devices - in which case I would need to be able to detect support. — Brad Robinson, Oct 20 '10 at 04:57
If you can always show the panel on touchscreen devices, couldn't you show it on other devices too? How large is the panel and why is it desirable to show it only on hover/tap? — EMPraptor, Oct 20 '10 at 06:07
possible duplicate of [What's the best way to detect a 'touch screen' device using JavaScript?](http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript) — Andrew Whitaker, Nov 28 '12 at 03:14

KevBurnsJr · Answer 1 · 2016-05-04T12:33:16.587

268

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.

edited May 04 '16 at 12:33

answered Jun 22 '11 at 23:57

KevBurnsJr

4,869
2
25
16

34

As described in the Modernizr docs, this only detects *browser* capability, not *device* capability... you'll get a false positive result on devices with no touch input running a touch-capable browser. I don't know of a way to detect *device* touch capability natively, without just waiting for a touch event to occur. – Stu Cox Dec 12 '12 at 11:24
12

In order to also detect IE 10 touch I'm using: (window.navigator.msMaxTouchPoints || ('ontouchstart' in document.documentElement)); – Alexander Kellett Mar 08 '13 at 10:45
Returns false positives on Win 8 PC with FF 23 and Chrome 28. Is this always the case or is it because I've once had a touch screen attached to this computer - probably before installing FF and Chrome - but not anymore? Finally Alexander Kellett's method manages to return a false positive on IE10 on the same PC. I think that the answer needs to be improved and that Stu Cox's comment is important. – Aug 19 '13 at 11:31
2

`'ontouchstart' in document.documentElement` incorrectly returns true on BlackBerry 9300 – Simpler Oct 17 '13 at 01:26
10

@typhon if the *software* (Win 8, modern browsers) supports touch, this will always be true – even if you're on hardware (desktop, standard monitor, mouse and keyboard) that doesn't support touch. Therefore this solution is out of date. – Barney Mar 10 '14 at 10:10
1

funnyItsNotCamelCaseAsJsIsThroughout. I mean people will now need to copy, paste AND edit the code.. . :) – Ross Mar 11 '14 at 16:43
1

The use of this ugly hack is actually what breaks certain browsers, and is the reason clicking the tinyscrollbar is broken in Ubuntu 14.x Firefox: https://bugs.launchpad.net/ubuntu/+source/firefox/+bug/1477815 – NoBugs Aug 12 '15 at 04:03
I've seen similar bugs in projects I've worked on professionally. This is not an ugly hack, it's just a simple feature detection that can easily be misused. I added a note to the original answer warning about the pitfalls of assuming mutual exclusivity of device input mechanisms. The bug you linked is a product of the assumption that devices can't have multiple input mechanisms which they often do. – KevBurnsJr May 04 '16 at 12:30
very good but not perfect for some weird Windows cases. (Chrome) – AGamePlayer Dec 13 '16 at 09:07

score 20 · Answer 2 · edited May 23 '17 at 12:18

20

Found testing for window.Touch didn't work on android but this does:

function is_touch_device() {
  return !!('ontouchstart' in window);
}

See article: What's the best way to detect a 'touch screen' device using JavaScript?

edited May 23 '17 at 12:18

Community

1
1

answered Jun 08 '12 at 18:16

hallodom

6,429
1
23
19

This does detect touch screens but be careful because it returns TRUE for laptops with touch screens too. This could be a problem if you are trying to distinguish if the user is from phone/tablet OR computer/laptop because for laptops with touch screen it returns TRUE. – Combine Aug 30 '17 at 08:32

score 12 · Accepted Answer · edited Jun 13 '15 at 01:34

12

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

edited Jun 13 '15 at 01:34

Ashkan Mobayen Khiabani

33,575
33
102
171

answered Oct 20 '10 at 04:53

Moin Zaman

25,281
6
70
74

1

Good solution, you could probably do something like a hover check with a one() bind so it only fires the first time around. – Timothy Perez Mar 20 '14 at 16:21
The problem is that if you target by screen width then when you rotate your device (let's take iphone 6+ 736x414) it won't have the same style. So not the best solution :/ – antoni Oct 06 '16 at 11:01

score 10 · Answer 4 · edited Nov 09 '18 at 05:44

10

if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
    isTouch = true;
} else {
    isTouch = false;
}

Works every where !!

edited Nov 09 '18 at 05:44

Shabbir Dhangot

8,954
10
58
80

answered Dec 18 '13 at 08:50

Code Spy

9,626
4
66
46

And what does that have to do with a mouse? (the actual question) – hexalys Feb 01 '14 at 03:24
2

It would be simpler to do `isTouch = "ontouchstart" in window || navigator.msMaxTouchPoints;` – Andrew Oct 10 '16 at 19:30

score 8 · Answer 5 · edited Dec 13 '15 at 15:54

8

return (('ontouchstart' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 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

edited Dec 13 '15 at 15:54

Tim Graham

1,495
3
16
17

answered Nov 09 '15 at 07:39

user

17,781
20
98
124

this worked and worked in google chrome developer tools simulate device thank you – Behnam Mar 24 '16 at 10:21

score 4 · Answer 6 · answered Nov 25 '12 at 00:14

4

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.

answered Nov 25 '12 at 00:14

Boyan

456
3
16

Both methods return false positives on Win 8 PC with FF 23 and Chrome 28. Is this always the case or is it because I've once had a touch screen attached to this computer - probably before installing FF and Chrome - but not anymore? I don't have "emulate touch events" option set. – Aug 19 '13 at 11:34
Uh, it's always a struggle with new hardware. Browsers have to work with the OS abstraction layers... which don't always implement everything... in short, with JS you have to rely on the browser :) There is never an universal way. – Boyan Aug 20 '13 at 12:25
Both of those return true on Ubuntu Firefox on a non-touch laptop. – NoBugs Aug 12 '15 at 04:07

score 4 · Answer 7 · edited Mar 20 '14 at 04:35

4

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";
}

edited Mar 20 '14 at 04:35

csano

13,266
2
28
45

answered Jan 23 '13 at 04:25

Timothy Perez

20,154
8
51
39

4

Be careful though: at least iPads throw onmouseovers too – Joril Apr 30 '13 at 20:44
And people using IE on a Windows tablet may want to use both touch and mouse. – Sebazzz Nov 01 '13 at 20:55
This post was made before the Windows Tablet came into existence. – Timothy Perez Nov 04 '13 at 19:38
@s427 - Fecking IE... just do a check for IE8. I don't think there are any mobile devices with <= IE8. – Timothy Perez Mar 20 '14 at 16:12

score 4 · Answer 8 · answered Jul 13 '16 at 15:05

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 && (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' && e.type === 'touchstart' )
        isTouchDevice = 'yes';
});

//<-- End: jQuery

Have a nice day!

score 4 · Answer 9 · answered Mar 19 '12 at 14:16

4

I use:

if(jQuery.support.touch){
    alert('Touch enabled');
}

in jQuery mobile 1.0.1

answered Mar 19 '12 at 14:16

Mark

3,334
1
22
27

2

jQuery recommends against using jQuery.support in favor of Modernizr (http://modernizr.com/): reference - http://api.jquery.com/jQuery.support/ - – Jonathan Marzullo Oct 31 '13 at 13:47

score 3 · Answer 10 · answered Apr 08 '14 at 00:22

3

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

answered Apr 08 '14 at 00:22

Prasad

57
5

Super simple and works fine for me. Tested on Android (old Galaxy Note) and with emulators (Chrome) and on iPad. – Ralf Mar 25 '15 at 13:32
Returns a false positive for me on Chrome. – James Jun 17 '15 at 12:05

score 3 · Answer 11 · answered Aug 25 '14 at 03:01

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/

Turtletrail · Answer 12 · 2014-03-05T08:50:35.410

2

This works for me:

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

edited Mar 05 '14 at 08:50

answered Nov 11 '12 at 12:06

Turtletrail

103
1
3

1

how many platforms, browsere, OS', devices have you tested on? – BerggreenDK Jan 30 '13 at 23:18
1

FF, Chrome, Safari on Android and iOS (iPad) – Turtletrail Apr 09 '13 at 09:30
1

Nice enough. I just tested on desktop and got a lot of "undefined" which makes the IF structure a bit hacky. If you ajust your return value just a little, like this: return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch); Then you have true or false :-) – BerggreenDK Apr 11 '13 at 12:00
2

In Chrome, "ontouchstart" in window is true on my PC without a touch screen, so this does not work. As remarked earlier, this tests if the browser is touch-capable. Also, true == doesn't do anything and should be omitted. – rakensi May 23 '14 at 10:59
1

When I try this in Chrome with the built in emulator, it will detect touch when it is switched on in the emulator, and will not detect touch when it is switched off. So works fine for me. But: I use the short version by Prasad (below) which does not use the || in Turtletrail's code. And: I don't care if it works for 100% of devices. 99% will do for me. – Ralf Mar 25 '15 at 13:36
Why are you comparing a boolean to `true`? õ.O Just return the boolean or `!!bool` to make sure it returns boolean – jpenna Jun 12 '20 at 14:34

score 1 · Answer 13 · edited May 23 '17 at 12:02

1

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

edited May 23 '17 at 12:02

Community

1
1

answered Jun 26 '13 at 17:38

j7m

1,067
8
13

2

Is the same response for 4 questions now... and this is not a solution for the question he is asking. – Jorge Y. C. Rodriguez Jul 11 '13 at 12:33
1

I believe it does answer the question here – j7m Aug 20 '13 at 09:16
it is not the answer but it is a hint i think for whom who want to detect if the device is touchable before user touch it – Shahadat Hossain Khan May 03 '18 at 05:23

score 1 · Answer 14 · answered Apr 20 '16 at 07:35

1

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

answered Apr 20 '16 at 07:35

OZZIE

6,609
7
55
59

score 0 · Answer 15 · answered Jul 09 '20 at 07:34

As already mentioned, a device may support both mouse and touch input. Very often, the question is not "what is supported" but "what is currently used".

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

Detecting touch screen devices with Javascript

16 Answers16

Linked

Related