long-press-event
Advanced tools
A 1k script that adds a long-press event to the DOM using pure JS
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
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>
git checkout -b my-new-featuregit commit -m 'Add some feature'git push origin my-new-featureThe 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 long-press-event.min.js by tweaking the version number in package.json and running:
npm run build
If you find this useful, please star the repo. It helps me prioritise which open source issues to tackle first.
For change-log, check releases.
Licensed under MIT License © John Doherty
FAQs
A 1k script that adds a long-press event to the DOM using pure JS
The npm package long-press-event receives a total of 2,558 weekly downloads. As such, long-press-event popularity was classified as popular.
We found that long-press-event demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.