html - how to check if user touch the device (the smartphone) with javascript - Stack Overflow

admin管理员组

文章数量:1289623

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

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

• javascript
• html
• orientation
• sensors

Share Improve this question Follow edited Mar 22, 2016 at 7:49 Kᴀτᴢ 2,17666 gold badges3232 silver badges6060 bronze badges asked Mar 22, 2016 at 7:30 MelifeMelife 2111 gold badge11 silver badge22 bronze badges 4

• 'ontouchstart' in window; – Rayon Commented Mar 22, 2016 at 7:37
• You could define a threshold under which you don't trigger any action. – n00dl3 Commented Mar 22, 2016 at 7:37
• Possible duplicate of What's the best way to detect a 'touch screen' device using JavaScript? – Damjan Pavlica Commented Dec 15, 2016 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 Commented Dec 15, 2016 at 11:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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./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./Modernizr/Modernizr/blob/master/feature-detects/touchevents.js

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 patibility, 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
}

you can try this codes:

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

hope it can be helpful.

本文标签： htmlhow to check if user touch the device (the smartphone) with javascriptStack Overflow