Resumen, ¿Cómo adjunto un clic y un dblclick en el mismo elemento en HTMX y también hago que cada evento ejecute una solicitud diferente (vistas)?
.Soy nuevo en HTMX usando django y tengo esta lista
<li class="list-group-item" hx-get="{% url 'quality:list' competence.pk %}" hx-target="#quality-list" hx-trigger="click" >funciona bien usando el evento de clic. Sin embargo, también quiero que ejecute otra vista (calidad: actualización) cuando se activa un dblclick. es decir, en el mismo elemento (li), el clic debe implementar la función de detalles y dblclick debe implementar la función de actualización
Podemos modificar la ruta de la solicitud en el htmx:configRequest HTMX según el tipo de evento desencadenante. Primero, debemos enumerar los eventos desencadenantes en el atributo hx-trigger . Sin embargo, para el evento de un solo clic, también debemos agregar algo de retraso ; de lo contrario, el evento de un solo clic también se activará dos veces antes del evento de doble clic. Establecí el retraso aquí en 0,5 segundos, pero puede ajustarlo para sus necesidades/público objetivo.
<li class="list-group-item" hx-get="{% url 'quality:list' competence.pk %}" hx-target="#quality-list" hx-trigger="click delay:0.5s, dblclick" > Podemos modificar la ruta en la propiedad evt.detail.path y podemos verificar el tipo de evento desencadenante en evt.detail.triggeringEvent.type :
<script> document.body.addEventListener('htmx:configRequest', function(evt) { evt.detail.path = (evt.detail.triggeringEvent.type === 'dblclick') ? '{% url 'quality:update' competence.pk %}' : '{% url 'quality:list' competence.pk %}' }); </script>Este pequeño recorte se puede colocar en cualquier parte de un archivo de plantilla de Django.