https://github.com/rafgraph/detect-touch-events
Detect if the browser has a touch screen and supports the Touch Events API
https://github.com/rafgraph/detect-touch-events
Last synced: about 1 year ago
JSON representation
Detect if the browser has a touch screen and supports the Touch Events API
- Host: GitHub
- URL: https://github.com/rafgraph/detect-touch-events
- Owner: rafgraph
- License: mit
- Created: 2016-07-06T05:16:48.000Z (almost 10 years ago)
- Default Branch: main
- Last Pushed: 2020-09-12T00:48:09.000Z (over 5 years ago)
- Last Synced: 2025-04-13T21:06:20.361Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://detect-it.rafgraph.dev#detect-touch-events
- Size: 43 KB
- Stars: 8
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Detect Touch Events
Detect if the browser supports the Touch Events API.
[Live detection test][liveDetectionTest]
Exports a reference to a singleton object (a micro state machine with an update function) with its state set to if the device supports the Touch Events API, as well as an `update()` function which re-runs the tests and updates the object's state.
Note that `detect-touch-events` is one of the micro state machines used by [`detect-it`][detectItRepo] to determine if a device is `mouseOnly`, `touchOnly`, or `hybrid`.
*For more information on the touch events api, please see [MDN's Touch Events][mdnTouchEvents], or the [W3C Touch Events specification][w3cSpecLatest].*
### `detectTouchEvents` micro state machine
```javascript
const detectTouchEvents = {
hasSupport: true / false,
browserSupportsApi: true / false,
// re-run all the detection tests and update state
update() {...},
}
```
### Installing `detect-touch-events`
```terminal
$ npm install --save detect-touch-events
```
### Using `detect-touch-events`
```javascript
import detectTouchEvents from 'detect-touch-events';
```
```javascript
// touch events api is present on a device with a touch screen - *most useful*
detectTouchEvents.hasSupport === true;
// browser supports the touch events api, but the device may or may not have a touch screen
detectTouchEvents.browserSupportsApi === true;
// updating the state - most apps won't need to use this at all
detectTouchEvents.update();
```
```javascript
/*
* note that in the case of a browser that doesn't support touch events,
* including when using a legacy computer and browser, the default state will be:
*/
const detectTouchEvents = {
hasSupport: false,
browserSupportsApi: false,
}
```
Note that `hasSupport` is still just an api presence test and some browsers (notably Firefox) may give a false positive (saying it has support on a device without a touch screen), so it is recommended to use [`detect-it`][detectItRepo] which factors in other tests as well to determine device capabilities.
Note that the `update()` function is run once at the time of import to set the object's initial state, and generally doesn't need to be run again. If it doesn't have access to the `window`, then the state will be `undefined` (`detect-touch-events` will not throw an error), and you will need to call the `update()` function manually at a later time to update its state.
### Part of the [`detect-it`][detectItRepo] family
- [`detect-it`][detectItRepo]
- [`detect-hover`][detectHoverRepo]
- [`detect-pointer`][detectPointerRepo]
- **`detect-touch-events`**
- [`detect-passive-events`][detectPassiveEventsRepo]
[liveDetectionTest]: https://detect-it.rafgraph.dev/#detect-touch-events
[w3cSpecLatest]: https://w3c.github.io/touch-events/
[mdnTouchEvents]: https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
[detectItRepo]: https://github.com/rafgraph/detect-it
[detectHoverRepo]: https://github.com/rafgraph/detect-hover
[detectPointerRepo]: https://github.com/rafgraph/detect-pointer
[detectPassiveEventsRepo]: https://github.com/rafgraph/detect-passive-events