Is there a way to add an event listener to the capturing phase using `Modifier` s? (I mean nicer tha...

# kobweb

[Norbi]

Is there a way to add an event listener to the capturing phase using Modifier s?
(I mean nicer than using e.g. DisposableEffect().)
Thanks.

[David Herman]

What's the use-case?

[Norbi]

Handling mouse events in an SVG element (panning, zoom) in the capturing phase and stopping event propagation to the children (because when not panning/zooming then the children may listen to the same events).
(It works with DisposableEffect() but the code is not nice...)

[David Herman]

Are you asking how to get access to the raw elements underneath the composable methods?

[Norbi]

No, I was just curious why the capturing phase seems to be unsupported by the `Modifier`s.
(And later I found that it seems to be unsupported by Jetbrains code as well.)

[David Herman]

In general, Kobweb / Compose HTML is more interested in declaring layout and styling; for more functionality you are usually expected to dig into the underlying JS standard library methods

[David Herman]

IntersectionObserver is a pretty useful class if you want to perform some behavior that only should be applied when something is visible on screen

[David Herman]

(but I'm not sure that's exactly what you need here? I'm not too clear yet with the problem you're describing)

[David Herman]

Looks something like this in raw JS: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

[David Herman]

In Kobweb it takes a little bit of boilerplate code to use it. You first have to create the observer object using a remember block and then you have to get the raw HTML element out of the composable.

[David Herman]

I thought I had some sample code using it but I can't find it at the moment

[Norbi]

Practically I want to disable events for the <svg> child elements when panning/zooming is in progress.
I found that capturing mouse events at the <svg> element and stopping their propagation (in the capturing phase) to the child SVG elements is a very easy solution to achieve "disabling events".
I'm looking for the best way to achieve it with Compose HTML, currently I use DisposableEffect() and I add/remove the event listeners manually.

[David Herman]

That's probably not unreasonable

[Norbi]

Thanks for the hints, I look into them.
And I try to get along with the less nice code :)

[David Herman]

Note that Kobweb does expose a small EventListenerManager utility class

[David Herman]

You can basically create one, add event listeners through it, and then call clearAllListeners in a dispose call.

[Norbi]

Wow, thanks. I haven't seen it yet, I will check out 🙂