Long-press events

This HTML page demonstrates how to use the longpress.js script to detect when the user long-presses a UI element on your page. After observing the behaviour of the page, view the page source to see the JavaScript.

Click, long-press, or Option-click (Alt-click on Windows) this
  Other Bad Button Good Button

Observe that for the link and button both the long-press event and the usual click event is delivered. The script cannot reliably prevent the delivery of the event when the mouse is released, so your code must check if this is the click following a long-press by examining event.target.justHadLongPress.

Observe that if you Option-click on the Bad Button the code delivers a long-press event (correct) but then delivers a click event without setting the justHadLongPress flag (wrong!). This happened because the page code added its click handler before the longpress.js code registered its own handlers. You must register your event handlers within a handler of the window.load event, and must register your load-event handler after including the longpress.js code.

Observe that on iOS if you long-press the Other Bad Button the code delivers a long-press event (correct) but the system also pops up a context menu offering to copy the selected text (wrong!). This happened because the button is not within containing element with the class supports-longpress. The Good Button behaves correctly because the class has been added to the button itself.

If you cannot (or don't want to) add the supports-longpress class to your HTML you will need to apply the following CSS rules to the DOM elements that you expect users to longpress on:

    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;