HTMX way of event.stopPropagation() for nested hx-get / boosted links

[ynnob]

Hey there

I have a table with multiple rows. Each row can be clicked and each row contains a nested div that also triggers a different hx-get.
For example clicking the row selects the row and loads some content while clicking the nested cell/icon navigates to a different page.

This will result in the following:

1. hx-get="/navigate" click triggered
2. hx-get="/selectrow" click triggered

resulting in a htmx:targetError because Event 1 already returned a different page that doesn't contain the target id.

Is there a HTMX-Way of preventing the inner click event to bubble up the dom?

Currently i use _hyperscript to call event.stopPropagation() on the click of the inner div.
_="on click event.stopPropagation()"

The same problem is present when using a boosted link instead of hx-get.

Example:

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr hx-get="/selectrow" hx-target="content-div" hx-trigger="click">
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>
           <div hx-get="/navigate" hx-trigger="click" _="on click event.stopPropagation()>I AM CLICKABLE</div>
   </td>
  </tr>
  <tr hx-get="/selectrow" hx-target="content-div" hx-trigger="click">
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>
           <div hx-get="/navigate" hx-trigger="click" _="on click event.stopPropagation()>I AM CLICKABLE</div>
   </td>
  </tr>
</table>

[Telroshan]

Hey, you should be able to stop event propagation using the consume modifier (see hx-trigger doc)

consume - if this option is included the event will not trigger any other htmx requests on parents (or on elements listening on parents)

You can try it on this JSFiddle, see how with consume added, the parent request is not fired anymore

Hope this helps!

[ynnob]

Thank you very much consume was exactly what i needed!