HTMX несколько событий на одном элементе - каждое событие выполняет свой запрос

Резюме, Как мне прикрепить click и dblclick к одному и тому же элементу в HTMX, а также сделать так, чтобы каждое из событий выполняло разные запросы (представления).

.Я новичок в HTMX, использую django и у меня есть этот список

   <li class="list-group-item"
        hx-get="{% url 'quality:list'  competence.pk  %}"
        hx-target="#quality-list"
        hx-trigger="click"
        >

все работает нормально, используя событие click. Однако я также хочу, чтобы он выполнял другое представление (quality:update), когда на нем срабатывает двойной щелчок. Т.е. на одном и том же элементе (li) click должен реализовать функцию details, а dblclick - функцию update

Мы можем изменять путь запроса в htmx:configRequest HTMX-событии в зависимости от типа срабатывающего события. Сначала нам нужно перечислить триггерные события в атрибуте hx-trigger. Однако для события одиночного щелчка нам также необходимо добавить некоторую задержку delay, иначе событие одиночного щелчка будет срабатывать дважды перед событием двойного щелчка. Я установил задержку в 0,5 секунды, но вы можете точно настроить ее для своих нужд/целевой аудитории.

<li class="list-group-item"
    hx-get="{% url 'quality:list' competence.pk %}"
    hx-target="#quality-list"
    hx-trigger="click delay:0.5s, dblclick"
    >

Мы можем изменить путь в свойстве evt.detail.path и проверить тип срабатывающего события в 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>

Этот небольшой фрагмент можно разместить в любом месте файла шаблона Django.

Вернуться на верх