Handle double click events in React

avatar

Borislav Hadzhiev

Thu Apr 21 20221 min read

Handle double click events in React #

To handle double click events in React:

  1. Add an onClick prop to the element.
  2. Use the detail property on the event object to get the click count.
  3. If the click count is equal to 2, handle the double click event.
App.js
export default function App() { const handleClick = event => { console.log(event.detail); switch (event.detail) { case 1: { console.log('single click'); break; } case 2: { console.log('double click'); break; } case 3: { console.log('triple click'); break; } default: { break; } } }; return ( <div> <div> <button onClick={handleClick}>Double click</button> </div> </div> ); }

react double click event

We added an onClick prop to a button element, so every time the button is clicked, the handleClick function is invoked.

The detail property on the event object provides the current click count for click events.

If you double click on the button, the switch statement will run the code for case 1 and case 2.

If you don't want to handle any of the other cases, you can use an if statement to check if event.detail is equal to 2.

App.js
export default function App() { const handleClick = event => { if (event.detail === 2) { console.log('double click'); } }; return ( <div> <div> <button onClick={handleClick}>Double click</button> </div> </div> ); }

The handleClick function explicitly checks if the current click count is equal to 2.

handle double click only

If you only need to handle double click events, this solution should be sufficient.

Use the search field on my Home Page to filter through my more than 1,000 articles.