# pan-events
> panstart, panmove and panend events
Latest version **0.1.5** (published 2022-06-06) · MIT license · 0 weekly downloads
## Install
```sh
npm install pan-events
pnpm add pan-events
yarn add pan-events
bun add pan-events
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.5 |
| Published | 2022-06-06 |
| First published | 2019-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jiang Fengming |
| Maintainers | jiangfengming |
| Keywords | panstart, panmove, panend |
## Links
- npm: https://www.npmjs.com/package/pan-events
- Repository: https://github.com/jiangfengming/pan-events
- Homepage: https://github.com/jiangfengming/pan-events#readme
- Issues: https://github.com/jiangfengming/pan-events/issues
- npm.io page: https://npm.io/package/pan-events
## Alternatives
- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads
## Recent versions
- 0.1.5 (latest) — 2022-06-06
- 0.1.4 — 2020-01-20
- 0.1.3 — 2019-12-03
- 0.1.2 — 2019-11-30
- 0.1.1 — 2019-11-30
- 0.1.0 — 2019-11-29
- 0.0.0 — 2019-11-29
## README
# pan-events
Add `panstart`, `panmove` and `panend` custom events to an element, support touch and mouse.
## Demo
Open it in desktop or mobile browser: [demo](https://jiangfengming.github.io/pan-events/example.html)
## Usage
```html
pan-events
```
## Install
```
npm install pan-events
```
## Import
```js
import panEvents from 'pan-events'
```
## panEvents
```js
const off = panEvents(element)
```
Adds `panstart`, `panmove` and `panend` [custom events](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent)
to the element.
### Returns
A function to remove listeners.
## Events
After `panEvents` is called on an element, it will have `panstart`, `panmove`, and `panend` events.
```js
element.addEventListener('panstart', event => {
console.log(event.detail)
})
element.addEventListener('panmove', event => {
console.log(event.detail)
})
element.addEventListener('panend', event => {
console.log(event.detail)
})
```
`event.detail` contains:
```js
{
screenX,
screenY,
clientX,
clientY,
pageX,
pageY
}
```
`panmove` and `panend` have additional `offsetX` and `offsetY` properties, which are relative to the position of
`panstart` event.
### preventDefault
If `event.preventDefault()` is called in `panmove` event, and the original event is `touchmove`, the `touchmove`
event is prevented. This is used to prevent pull-to-refresh of mobile Chrome and scrolling.
## License
[MIT](LICENSE)
---
_Source: https://npm.io/package/pan-events · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._