Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/john-doherty/long-press-event
Adds `long-press` event to the DOM in 1k of pure JavaScript
https://github.com/john-doherty/long-press-event
custom-events dom javascript no-dependencies vanilla-javascript
Last synced: 1 day ago
JSON representation
Adds `long-press` event to the DOM in 1k of pure JavaScript
- Host: GitHub
- URL: https://github.com/john-doherty/long-press-event
- Owner: john-doherty
- License: mit
- Created: 2017-06-09T11:33:05.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-11-11T21:13:03.000Z (2 months ago)
- Last Synced: 2025-01-13T14:55:31.471Z (7 days ago)
- Topics: custom-events, dom, javascript, no-dependencies, vanilla-javascript
- Language: JavaScript
- Homepage: https://jsfiddle.net/kdfhz12y/
- Size: 231 KB
- Stars: 328
- Watchers: 9
- Forks: 86
- Open Issues: 20
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
- awesome-star-libs - john-doherty / long-press-event
README
# long-press-event
[](https://app.shippable.com/projects/593aa7c6118f370700f9f244) [](https://www.npmjs.com/package/long-press-event)
A **1k** script that adds a `long-press` event to the DOM using [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent) and pure JavaScript. Works in IE9+, Chrome, Firefox, Safari as well as popular mobile browsers including Cordova _(Phone Gap)_ applications.
Defaults to 1.5 seconds but can be overridden by adding a `data-long-press-delay` attribute to an element.
Try the [demo](https://jsfiddle.net/kdfhz12y/)
## Usage
Add the [long-press-event.min.js](dist/long-press-event.min.js) file to your page and then listen for the event.
To listen for a `long-press` on any HTML element:
```js
// the event bubbles, so you can listen at the root level
document.addEventListener('long-press', function(e) {
console.log(e.target);
});
```
To listen for a `long-press` on a specific HTML element:
```js
// grab the element
var el = document.getElementById('idOfElement');
// listen for the long-press event
el.addEventListener('long-press', function(e) {
// stop the event from bubbling up
e.preventDefault()
console.log(e.target);
});
```
To set a custom delay and listen for a `long-press`:
```html
document.addEventListener('long-press', function(e) {
console.log(e.target);
});
Press and hold me for .5s
```
To set a default application wide `data-long-press-delay`, set attribute on a parent/topmost element:
```html
...
...
```
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request
### Development
The project includes everything needed to tweak, including a node webserver. Run the following, then visit [http://localhost:8080](http://localhost:8080) in your browser.
_You can test on a desktop using [Device Mode](https://developers.google.com/web/tools/chrome-devtools/device-mode/) in Google Chrome._
```bash
git clone https://github.com/john-doherty/long-press-event
cd long-press
npm install
npm start
```
### Update .min files
Update [long-press-event.min.js](dist/long-press-event.min.js) by tweaking the version number in `package.json` and running:
```bash
npm run build
```
## Star the repo
If you find this useful, please star the repo. It helps me prioritise which open source issues to tackle first.
## History
For change-log, check [releases](https://github.com/john-doherty/long-press-event/releases).
## License
Licensed under [MIT License](LICENSE) © [John Doherty](https://twitter.com/mrjohndoherty)