x-on.click.capture

[Hulkmaster]

Sometimes i have to have nested interactable elements
and sometimes we require "parent" element to have priority for interaction

usually (with vuejs) i would do something like

<div
  @click.capture.stop = "action()"
>
  <div> some content </div>
  <div
    @click="internalAction()"
  > icon </div>
</div>

however alpine does not have such modifier

[ekwoka]

It actually does.

https://alpinejs.dev/directives/on

@click.stop

However, what you are showing there is improper html

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

The button element should only have phrasing content.

Keyboard and screenreader focus could have trouble.

[Hulkmaster]

actually i misplaced listenres, will fix right now

i'll change it to two divs, to make it a valid html, but logic will remain the same
sometimes designers just want to watch the world burn, and we have to deal with it

[SimoTod]

@Hulkmaster what @ekwoka was trying to explain you is that, in your example, capture does not do anything. You just need stop (both Vue and Alpine).

It would do something if you put capture on the external element (see https://javascript.info/bubbling-and-capturing).

In general, event capturing is really uncommon.

[Hulkmaster]

i think i just did not found good example on when thats required 😩

but sometimes i need to add event listener on capture phase, and stop propagation if some checks had passed in listener

[SimoTod]

Mmmh, okay not sure about your use case, however, the capture modifier is not documented but it does exist in Alpine.

[ekwoka]

Yes, capture shouldn't be needed at all in Alpine.

It's possible that since you were using buttons they were also triggering a default behavior, which requires .prevent to stop

[Hulkmaster]

btw found out good example:

lets imagine we have card, and inside that video-card there is a play-button
when user clicks on video-card, he "selects" it
when card is selected - user should not be able to click button

[ekwoka]

But should they be able to click the play button if the card isn't selected?

I'm also not sure why the play button shouldn't be clickable if the card is selected?

But there are multiple ways to handle this with css or javascript.

[Hulkmaster]

design decisions

when not selected -> can be played
when selected -> i need to capture event and prevent playButton to be clickable
and they are different component, which has zero interaction in between, so i need to externally somehow prevent interaction

[SimoTod]

I'm confused too, if you show a button that looks like it's clickable and it isn't for an unwritten rule, it's just bad UI/UX.
If the button is not clickable when a card is not selected, hide it or, at least disable it.
This is a different problem though, I guess it's up to your designers but they should really try to stick to the web conventions.

To answer your original question, capture is supported. Is it not working for you?

[SimoTod]

See https://codepen.io/SimoTod/pen/jOxMKNY

[ekwoka]

Alternatively, you can have, when focus is on the outer card, that pointer-events: none; is applied to the button you want disabled.

[Hulkmaster]

yeah, .capture is working, works for me

maybe is a good idea to add it to docs