How to add two different click events at single element in react application? Using JavaScript not any other js library like jQuery

Question

I have been stuck that how we can add different click events on a single element. for that, I am adding my scenario that what I want to achieve.

So the scenario is I want to add two events on my button 1st is onClick={} 2nd is onDoubleClick={} and on both I am performing different actions. but when I add both events it calls every time the single onClick event, which means if I clicked twice it call two times onClick and one time onDoubleClick event where i just want to call only onDoubleClick event when I click twice.

Note: i want to implement this in react application.

here is my code of that button which has both onClick and onDoubleClick envets

<Button type="primary" className='btn btn-secondary' 
 onClick={() => console.log("once clicked")}
 onDoubleClick={() => console.log("twice clicked")} > >
       Two Events call        
</Button>

Output: [Output of clicking button twice][1] [1]: https://i.stack.imgur.com/3zcIk.png

Answer 1

You can use event.detail to check clicks onClick

const clickHandler = event => {
    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
      }
    }
}
...
<button onClick={clickHandler} >click me</button>

but first click will be used every time(and second for every 3click) so make sure you cleared it for 2 or 3 click. It's possible when you use debounce. hope this will help you