Changing <input type= color> behaviour from single click to double click

Question

By default clicking a will bring up a window that lets you pick a custom colour.

I want to do this with a double click instead.

I can stop single click from working with e.preventDefault but I can't work out how to make doubleClick do this behaviour instead.

What I want:

handleDbClick = (e) => {
  //opens colour selection box
}
<input type="color" onDoubleClick={this.handleDbClick}/>

Solution:

handleClick = (e) => {
  if(e.detail === 1) {
     e.preventDefault()
     //do stuff for one click
  }
  //open colour selection box
}

<input type="color" onClick={this.handleClick} />

Thanks

Answer 1

What about something like this:

 const colorInput = document.getElementById("colorInput")
        let count = 0;
        let interval
        
        colorInput.addEventListener('click', e => {
            count++
            clearInterval(interval)
            interval = setInterval(() => {
             count = 0   
            }, 300)
            if(count === 2) {
                count = 0
            } else {

                e.preventDefault();
            }
        })

or this:

const colorInput = document.getElementById("colorInput")
        
        colorInput.addEventListener('click', e => {
            if(event.detail !== 2) {
                e.preventDefault()
            }
        })