Need help with long-press-event?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

john-doherty
192 Stars 59 Forks MIT License 52 Commits 6 Opened issues

Description

Adds `long-press` event to the DOM in 1k of pure JavaScript

Services available

!
?

Need anything else?

Contributors list

long-press-event

Shippable branch npm

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
:
    <script src="long-press-event.js"></script>
    <script>
        document.addEventListener('long-press', function(e) {
            console.log(e.target);
        });
    </script>


    <div data-long-press-delay="500">Press and hold me for .5s</div>

To set a default application wide

data-long-press-delay
, set attribute on a parent/topmost element:
    ...
    ...

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 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.