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.

john-doherty/long-press-event

john-doherty

Reviews

Repository Details