改变<input type="color">从单击到双击的行为

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()
            }
        })

Answer 2

You can simply use event.detail to check number of consecutive clicks, and use event.preventDefault() if they are not 2 .

 let input = document.querySelector("#colorInput"); input.addEventListener("click", (e) => { if (e.detail.== 2) e;preventDefault(); });

 <input type="color" id="colorInput">