how to check if user touch the device (the smartphone) with javascript

Question

I want to build a simple web app that can tell if the user touched the phone (device). Not just the screen, but the all device. So I figure it out how to check if the user touch the screen but not the orientation and motion sensors part. So I found out this code:

if (window.DeviceOrientationEvent) { 
  var x = document.getElementById('1'); 
  var y = document.getElementById('2');
  var z = document.getElementById('3');
  window.addEventListener('deviceorientation', function(eventData) {
        // gamma is the left-to-right tilt in degrees
        console.log(eventData.gamma);
        x.innerHTML = eventData.gamma;
        // beta is the front-to-back tilt in degrees
        console.log(eventData.beta);
        y.innerHTML = eventData.beta;
        // alpha is the compass direction the device is facing in degrees
        console.log(eventData.alpha);
        z.innerHTML = eventData.alpha;
    }, false);
}

And it is showing me a lot of fast-changing data! but when i put down the phone on my table it is keep changing the data like if I was moving my device. So how can I check if the user moves its phone/device? I could not really figure it out, if you could help me with your piece of code and explantion or even show me a site who can I would appreciate it! In a perfect world:

if(user.touchDevice){alert("YOU TOUCHED PHONE!!!");}

Thanks a lot! And sorry for my English :)

You could define a threshold under which you don't trigger any action. — n00dl3, Mar 22 '16 at 07:37
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) — Damjan Pavlica, Dec 15 '16 at 10:57
That's not a duplicate - this question is asking how to detect a touch event; that other question is about whether a device has touch capability, not the same thing at all. — Synchro, Dec 15 '16 at 11:38

score 7 · Answer 1 · answered Mar 22 '16 at 07:39

7

You cannot reliably detect touch devices. You can detect browser features like Touch Events API (which can be enabled in browsers on non-touch devices) or assume touch capabilities according to screen size by using media queries (small device will almost always have touch screen).

Please read this article for detailed explanation and possible solutions: http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

This is code which is used by Modernizr to detect "touchevents":

if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) { 
    // Touch events are supported
}

https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js

answered Mar 22 '16 at 07:39

Māris Kiseļovs

16,957
5
41
48

2

This doesn't catch a Surface tablet running Edge – dude Dec 20 '16 at 15:55
@dude simply because Edge does not support Touch Events but Pointer Events – martpie Jan 23 '17 at 09:44
1

May be true, but it's still a touch device. So it does matter! – dude Jan 23 '17 at 10:45

pstanton · Answer 2 · 2017-08-10T07:15:49.743

The only real way would be to set a value when a touch event or a mouse event occurs on the window.

the problem with this would be that you don't know until the user interacts, and some 'touch-like' devices/browsers just emulate mouse behaviour and utilise mouse events.

you should stop listening to both events once one is received, since touch devices 'emmulate' mouse events for backwards compatibility, so you will receive subsequent mouse events in touch devices. therefore, first event is a positive identification, and subsequent events should be ignored.

var hasTouch, hasMouse;
window.addEventListener('touchstart', function handleTouch() {
    hasTouch = true;
    window.removeEventListener('touchstart', handleTouch);
    window.removeEventListener('mousemove', handleMouse);
}, false);
window.addEventListener('mousemove', function handleMouse() {
    hasMouse = true;
    window.removeEventListener('touchstart', handleTouch);
    window.removeEventListener('mousemove', handleMouse);
}, false);

function isTouchDevice() {
    return hasTouch ? true // definitely
        : hasMouse ? false // definitely not
            : null; // don't know either way
}

score 0 · Answer 3 · answered Aug 04 '17 at 03:55

0

you can try this codes:

var isTouch = ("ontouchstart" in window) || (navigator.msMaxTouchPoints || navigator.maxTouchPoints) > 2;

hope it can be helpful.

answered Aug 04 '17 at 03:55

令狐葱

1,117
12
12

how to check if user touch the device (the smartphone) with javascript

3 Answers3