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