CODEWITHSUNDEEP
javascriptreactjstouch-event
sina farbod
sina farbod

Reputation: 497

How to simulate long press with react js?

I want to trigger long press event with click event. is there any way to that in react js?

something close to this, is the jQuery trigger() function. but i want something like trigger("longPress") or open up right click menu with left click in react. both mentioned (long press trigger / open up right click menu) are ideal for me

Upvotes: 0

Views: 4387

Answers (2)

Abdelrahman Mahmoud
Abdelrahman Mahmoud

Reputation: 124

you can do this hack by get hold time

https://stackblitz.com/edit/react-d1txdm

export default function App() {
  let triggerTime;
  return (
    <div>
      <h1>Try on Google Chrome Desktop</h1>
      <p>Open the console log to see how the event gets triggered.</p>
      <p>The event should not get triggered if there is a long click.</p>
      <img
        src="https://via.placeholder.com/200.png/09f/fff"
        onClick={(e) => {
          if (triggerTime > 1000) return;
          else console.log('normal click');
        }}
        onMouseDown={() => {
          triggerTime = new Date().getTime();
        }}
        onMouseUp={() => {
          let thisMoment = new Date().getTime();
          triggerTime = thisMoment - triggerTime;
        }}
      />
    </div>
  );
}

Upvotes: 1

Jon Warren
Jon Warren

Reputation: 857

What about something like this:

const myComponent = () => {

    let clickHoldTimer = null;

    const handleMouseDown = () => {
        clickHoldTimer = setTimeout(() => {
            //Action to be performed after holding down mouse
        }, 1000); //Change 1000 to number of milliseconds required for mouse hold
    }

    const handleMouseUp = () => {
        clearTimeout(clickHoldTimer);
    }

    return (
        <div onMouseDown={handleMouseDown} onMouseUp={handleMouseUp} />
    )

}

Upvotes: 1

Related Questions