0

I have the following button:

<button on:click={setOnAir} type="button" class="input-group-text">
  <i class="fa-solid fa-satellite-dish " />
</button>;

But when clicking the inline element containing the icon, the event target gets set to the inline element instead of the button element; e.target: <i class="fa-solid fa-satellite-dish s-UJ6DSMQS0zv2"></i>.

Modifying the on:click to on:click|self={setOnAir} disables this behavior, but then there's no event fired at all when clicking the icon. I tried other modifiers as well, without success so far.

Any help is welcome :)

Bart Cuijpers
  • 3
  • 1

1 Answers1

2

This doesn't just apply to Svelte, this applies to how the event listener and event bubbling works. What you can do is use currentTarget instead of target.

Here's an answer to a similar question with vanilla JS: https://stackoverflow.com/a/63578073/13631113

Joshua Q
  • 635
  • 5
  • 18