Easily add stopPropagation to phx-click

Questions / Help
1

Hello,

Is there an easy way to add stopPropagation to phx-click?
I have a button inside a list item where entire list item is an a tag, so naturally clicking button also triggers redirection with a.

This certainly can be done with hooks and that’s my current approach, but I was thinking if there’s some easier way to do it with phx-click or to slightly extend phx-click?

2

Buttons are not valid children of a tags. Consider restructuring your html.

1 Like
3

is phx-capture-click what you are looking for?

The phx-capture-click event is just like phx-click , but instead of the click event being dispatched to the closest phx-click element as it bubbles up through the DOM, the event is dispatched as it propagates from the top of the DOM tree down to the target element. This is useful when wanting to bind click events without receiving bubbled events from child UI elements. Since capturing happens before bubbling, this can also be important for preparing or preventing behaviour that will be applied during the bubbling phase.

4

Thanks, good point. Buttons inside links work just fine but I’ll try to find a better approach.

5

Any knowledge if upcoming HEEx templates will give warning or error when someone is creating invalid inner elements like OP is doing?

6

I’d expect it to give only syntactic errors given how complex the semantic aspects of html are. But it might also do a subset of semantic validations.

1 Like
7

Thanks, this is working fine! I’ve tried it before but it wasn’t working. Turns out there was just an error thrown by the handler and somehow link redirection kicked in anyway.

8

Hi All

appreciate this is an old thread but noticed that capture-click is no longer documented in version 0.17.5 and seems to have been replaced with click-away. capture-click certainly still works in 0.17.5 but I wondered if any of the Liveview team could confirm that it isn’t going to be depracted?

cheers

Dave

9

Changelog says phx-capture-click has been deprecated in favor of phx-click-away