英文:
Svelte on:click has incorrect e.target when using a button with an inline icon
问题
我有以下按钮：
<button on:click={setOnAir} type="button" class="input-group-text">
<i class="fa-solid fa-satellite-dish"></i>
</button>;
但当点击包含图标的内联元素时，事件目标被设置为内联元素而不是按钮元素；e.target: <i class="fa-solid fa-satellite-dish"></i>。
将on:click修改为 on:click|self={setOnAir} 可以禁用此行为，但在点击图标时不会触发任何事件。我也尝试了其他修饰符，但目前还没有成功。
欢迎任何帮助 
英文:
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
答案1
得分: 3
这不仅适用于Svelte，也适用于事件监听器和事件冒泡的工作方式。你可以使用currentTarget而不是target。
这是一个使用纯JS回答类似问题的答案：
https://stackoverflow.com/a/63578073/13631113
英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论