long-press-event
A 1k script that adds a long-press event to the DOM using 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
Usage
Add the 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:
// 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:
// 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>
<head>
<script src="long-press-event.js"></script>
<script>
document.addEventListener('long-press', function(e) {
console.log(e.target);
});
</script>
</head>
<body>
<div data-long-press-delay="500">Press and hold me for .5s</div>
</body>
</html>
To set a default application wide data-long-press-delay, set attribute on a parent/topmost element:
<html data-long-press-delay="1500">
<head>...</head>
<body>...</body>
</html>
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request
Development
The project includes everything needed to tweak, including a node webserver. Run the following, then visit http://localhost:8080 in your browser.
You can test on a desktop using Device Mode in Google Chrome.
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 by tweaking the version number in package.json and running:
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.
License
Licensed under MIT License © John Doherty
493 Jan 8, 2023
14 Dec 15, 2022
1 Mar 1, 2021
3 May 23, 2022
11 Jan 4, 2023
12 Aug 1, 2022
20.3k Dec 24, 2022
21 Oct 1, 2022
17 Sep 28, 2022
3 Nov 21, 2022
14 Dec 16, 2022
28 Dec 13, 2022
736 Jan 4, 2023
6 Aug 20, 2022
50.9k Jan 1, 2023
5 May 25, 2022
21 Dec 25, 2022
3 Mar 19, 2022
5 Nov 14, 2022