De forma predeterminada, al hacer clic en aparecerá una ventana que le permite elegir un color personalizado.
Quiero hacer esto con un doble clic en su lugar.
Puedo hacer que un solo clic deje de funcionar con e.preventDefault pero no sé cómo hacer que DoubleClick haga este comportamiento en su lugar.
Lo que quiero:
handleDbClick = (e) => { //opens colour selection box } <input type="color" onDoubleClick={this.handleDbClick}/>Solución:
handleClick = (e) => { if(e.detail === 1) { e.preventDefault() //do stuff for one click } //open colour selection box } <input type="color" onClick={this.handleClick} />Gracias
¿Qué pasa con algo como esto:
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(); } })o esto:
const colorInput = document.getElementById("colorInput") colorInput.addEventListener('click', e => { if(event.detail !== 2) { e.preventDefault() } })Simplemente puede usar event.detail para verificar el número de clics consecutivos y use event.preventDefault() si no son 2 .
let input = document.querySelector("#colorInput"); input.addEventListener("click", (e) => { if (e.detail !== 2) e.preventDefault(); }); <input type="color" id="colorInput">