https://github.com/rafgraph/detect-touch
Detect if a device has a touch interface
https://github.com/rafgraph/detect-touch
Last synced: about 1 year ago
JSON representation
Detect if a device has a touch interface
- Host: GitHub
- URL: https://github.com/rafgraph/detect-touch
- Owner: rafgraph
- License: mit
- Created: 2016-05-20T19:21:58.000Z (about 10 years ago)
- Default Branch: main
- Last Pushed: 2020-09-10T19:04:17.000Z (over 5 years ago)
- Last Synced: 2025-04-15T11:00:52.734Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://detect-touch.rafgraph.dev
- Size: 369 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
---
### *This has been deprecated in favor of [Detect It](https://github.com/rafgraph/detect-it)*
---
# Detect Touch Devices
[Live touch detection test][liveTest]
`detect-touch` will detect if a device has a touch interface. It provides both a boolean one time touch detection on import, as well as a function to run the touch detection at any time.
[liveTest]: https://detect-touch.rafgraph.dev
## Installing `detect-touch`
```terminal
$ npm install --save detect-touch
```
## Importing `detect-touch`
Importing only the `hasTouch` boolean:
```javascript
import { hasTouch } from 'detect-touch';
// or
var hasTouch = require('detect-touch').hasTouch;
```
Importing only the `detectTouch` function:
```javascript
import { detectTouch } from 'detect-touch';
// or
var detectTouch = require('detect-touch').detectTouch;
```
Importing both the `hasTouch` boolean and the `detectTouch` function:
```javascript
import { hasTouch, detectTouch } from 'detect-touch';
// or
var hasTouch = require('detect-touch').hasTouch;
var detectTouch = require('detect-touch').detectTouch;
```
## Using `detect-touch`
The `hasTouch` boolean is established at the time it is imported, and the function to detect a touch device runs only one time. In most cases this is all you need.
```javascript
// Using the hasTouch boolean:
hasTouch === true;
// or
hasTouch === false;
```
The `detectTouch` function attempts to detect a touch device each time it is called and can be used to check or recheck for a touch device at a specific time. Returns a boolean. For example, if `detect-touch` doesn't have access to the `window` when it is imported you'll need to wait until it does before checking if a device has a touch interface.
```javascript
// Using the detectTouch function:
detectTouch() === true;
// or
detectTouch() === false;
```
## Detection Tests
`detect-touch` checks to see if the browser implements any of the following:
The standard [W3C Touch Events API][w3cTE] (this is the vast majority of touch devices), by checking for:
```javascript
'ontouchstart' in window
```
Number of touch points (required to detect [Microsoft's Pointer Events API running on a touch device][maxTP], however, devices not implementing Pointer Events may also indicate this), by checking for:
```javascript
window.navigator.maxTouchPoints > 0 ||
window.navigator.msMaxTouchPoints > 0 // pre IE 11
```
[Firefox's legacy `DocumentTouch`][docT] (which is now obsolete), by checking for:
```javascript
window.DocumentTouch && document instanceof DocumentTouch
```
[w3cTE]: https://www.w3.org/TR/touch-events/
[maxTP]: https://msdn.microsoft.com/en-us/library/dn433244(v=vs.85).aspx#feature_detection_and_touch_support_testing
[docT]: https://developer.mozilla.org/en-US/docs/Web/API/DocumentTouch