Tengo el siguiente código en este StackBlitz:
https://stackblitz.com/edit/react-vmstl9
import React from 'react'; import './style.css'; export default function App() { 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={() => { console.log('You clicked me!'); }} /> </div> ); }Necesito que el evento de clic se active solo si ocurre un clic normal.
Actualmente, si hago clic en la imagen y mantengo el clic durante 2 segundos, el evento aún se activa. Necesito prevenir eso.
¿Alguna idea sobre cómo lograr eso?
¡Gracias!
Encontré este artículo sobre Stack Overflow encontrado aquí
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} /> ) }puedes hacer estos trucos obteniendo el tiempo del titular
https://stackblitz.com/edit/react-d1txdm
export default function App() { let holdTimer; 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 (holdTimer > 1000) return; else console.log('normal click'); }} onMouseDown={() => { holdTimer = new Date().getTime(); }} onMouseUp={() => { let endHolder = new Date().getTime(); holdTimer = endHolder - holdTimer; }} /> </div> );