Long Press in JavaScript

Long Press in JavaScript?

There is no 'jQuery' magic, just JavaScript timers.

var pressTimer;

$("a").mouseup(function(){
  clearTimeout(pressTimer);
  // Clear timeout
  return false;
}).mousedown(function(){
  // Set timeout
  pressTimer = window.setTimeout(function() { ... Your Code ...},1000);
  return false; 
});

Javascript: Detecting a long press

You could beautify this through using some curried arrow functions:

const listen = (el, name) => handler => el.addEventListener(name, handler);

const since = (onStart, onEnd) => {
  let last = 0;
  onStart(() => last = Date.now());
  onEnd(() => last = 0);
  return time => Date.now() - last < time;
};

So you can just do:

const longPress = since(
   listen(listItem, "touchstart"),
   listen(listItem, "touchend")
);

listen(listItem, "touchmove")(evt => {
  if(longPress(100)) {
    //...
   }
});

Detect long press on touch devices

As discussed in the comment section.

On most devices contextmenu fires without releasing the touch, so in most cases it should be fine to use the contextmenu event to get the desired result.

This might be a bug in the DevTools of Chromium, since you tested with that. I recommend to simply use the contextmenu event.

In case the specific device really fires the context menu on touch release, the user expects the same behavior on your website/app, so it should be fine to go this route.

react long press event for stopwatch

Edit:
I forgot that keydown fires multiple times when it's held, check out the example below, just need to check whether the key is a "repeat" key. I had to use useRef to get it working but should be a good foundation for the rest of your logic:

const timestamp = useRef(0);

const spacebarPress = (e) => {
  // exit if the key is not spacebar or is the same key as last pressed
  if (e.keyCode !== 32 || e.repeat) return; 
  timestamp.current = Date.now();
}

const spacebarRelease = (e) => {
  if (e.keyCode !== 32) {
    return; // exit if the key is not spacebar
  }
  const pressed = timestamp.current, released = Date.now();
  if (released - pressed < 2000)
    return; // less than 2 seconds have passed since pressing
  // ... your logic here, spacebar was pressed for two seconds.
}

I generally tend to avoid setTimeout where possible, IMO it's not very reliable and a pain to debug.

Should get you most of the way, just add a different key down/up event while the timer is running if e.repeat stops the timer from being paused again.

how to implement longpress and click sepereate event in javascript?

You can cancel the click event from propagating by hooking into the event capture phase.

const shopping = document.getElementById('shopping');
shopping.addEventListener('mousedown' , function() {
    pressTimer = window.setTimeout(longpressed,1000);
});
shopping.addEventListener('mouseup' , function(e) {
    clearTimeout(pressTimer);
});

shopping.addEventListener('click' , function(e) {
    console.log('click');
});

function longpressed() {
    console.log('longpress');
    
    window.addEventListener(
        'click',
        captureClick,
        true // <-- This registers this listener for the capture
             //     phase instead of the bubbling phase!
    );
}

function captureClick(e) {
    e.stopPropagation(); // Stop the click from being propagated.
    window.removeEventListener('click', captureClick, true); // cleanup
}

<button type="button" id="shopping">
Shopping cart
</button>

Long Press button in react

One of the hack you can try is that you note the time when 'onMouseDown' event is fired and also note the time when 'onMouseUp' is fired.

If the difference between these times is greater than equal to 2 seconds, you can perform the action you want.

You must write logic to check the time difference and the code you want to execute, in method which will get executed when 'onMouseUp' event is fired.

delay = 2000;
startPress = null;

function mouseDown() {
    startPress = Date.now();
}

function mouseUp() {
    if(Date.now() - startPress > delay)
    {
        // your code
    }
}

---

Related Topics