Nested phx-clicks / is there a way to stop event propagation of a toggle?

I have a table row that should open an edit modal for the item shown in the row. I added a phx-click for this. Sadly, inside the row, I now need to add a toggle that also listens on phx-click. Is there a way to stop event propagation of the toggle? Currently, it fires both. Meaning: it changes the toggle state and then opens the modal of the table row.

1 Like

Instead of addressing it at the event propagation level, it might make more sense to update the template by splitting each table row into two seperate sections, one for the toggle and the other for the rest of the row, and then adding phx-click to each section.


another option is adding a phx-value or some other attribute to then use to filter the event with. but this is dirty and would lean towards what @codeandpeace said or even splitting into complete separate components (and then use phx-target).


Yes, I currently work around that with adding a click handler on all table cells. Sadly, the design adds some gaps and borders which are not clickable and create some dead zones in the table row :sweat_smile:. A stop event propagation version of phx-click would be really nice to have for this. But for not it is “good enough”.