Tengo un elemento de etiqueta para una página web. al pulsar una vez se ejecuta una lógica, al pulsar dos veces otra. Sin embargo, el DOM solo responde a un clic y se activa de inmediato, sin importar qué tan rápido intente activar un evento de doble clic.
¿Cómo uso estos dos eventos en un elemento?
export const createTag = (name) => { const tag = document.createElement('span'); tag.innerHTML = name; tag.addEventListener('dblclick', () => { tags.removeChild(tag); storeTags.splice(storeTags.indexOf(name), 1); }); tag.addEventListener('click', () => { search.value = tag.innerHTML; const keyboardEvent = new KeyboardEvent('keypress', { code: 'Enter', key: 'Enter', charCode: 13, keyCode: 13, view: window, bubbles: true, }); storeTags.splice(storeTags.indexOf(name), 1); storeTags.unshift(name); search.dispatchEvent(keyboardEvent); }); return tag; };La idea básica para lograr esto sería agregar un pequeño retraso a la operación de click y cancelarlo si se recibe un dblclick . Esto conduce a una capacidad de respuesta reducida de su interfaz de usuario, ya que su aplicación ahora tiene que distinguir explícitamente entre clics simples y dobles en una especie de enfoque de "esperar y ver". Esto también puede ser poco confiable ya que el usuario puede establecer cualquier período de tiempo como su umbral de doble clic en la configuración de Accesibilidad de su dispositivo.
Sin embargo, si se considera que estos problemas no son una preocupación suficiente, la forma "mejor de la peor" de hacerlo sería implementar manualmente comprobaciones de doble clic.
export const createTag = (name) => { const tag = document.createElement('span'); tag.innerHTML = name; const clickHander = () => { search.value = tag.innerHTML; const keyboardEvent = new KeyboardEvent('keypress', { code: 'Enter', key: 'Enter', charCode: 13, keyCode: 13, view: window, bubbles: true, }); storeTags.splice(storeTags.indexOf(name), 1); storeTags.unshift(name); search.dispatchEvent(keyboardEvent); }; const dblClickHandler = () => { tags.removeChild(tag); storeTags.splice(storeTags.indexOf(name), 1); }; let clickTimer; tag.addEventListener('click', () => { if( clickTimer) { clearTimeout(clickTimer); dblClickHandler(); clickTimer = null; } else { clickTimer = setTimeout(() => { clickHandler(); clickTimer = null; }, 500); } }); return tag; };Ajuste el temporizador como le parezca apropiado. Los números más pequeños darán lugar a clics con mayor capacidad de respuesta, pero harán que hacer doble clic sea más difícil para las personas con movilidad reducida.
Realmente recomendaría encarecidamente usar una interfaz de usuario diferente aquí. Sobrecargar clics de esta manera es una muy mala idea en general.