HTMX: disable click event on child nodes

Question

I have the following divs and want that when clicking on id="child" it should NOT execute a get to "/modal/closed" and NOT replace the id="modal". That is, do nothing HTMX related.

<div id="modal" hx-trigger="click"
    hx-swap="outerHTML" hx-target="#modal" hx-get="/modal/closed" hx-params="none">
    <div id="child">
    </div>
</div>

Right now I have it working using the trigger "click consume" but need to specify an hx-get to an HTTP path that returns nothing (/nop).

Is there a cleaner way to do this?

<div id="modal" hx-trigger="click"
    hx-swap="outerHTML" hx-target="#modal" hx-get="/modal/closed" hx-params="none">
    <div hx-trigger="click consume" hx-swap="none" hx-get="/nop">
    </div>
</div>

Answer 1

This can be solved using the event modifier "target:#modal" to indicate we are only interested on the click event originated from the id="modal".

This way clicks over id="child" that bubble up to id="modal" will be ignored.

<div id="modal" hx-trigger="click target:#modal"
    hx-swap="outerHTML" hx-get="/modal/closed" hx-params="none">
    <div id="child">
    </div>
</div>