Svelte按钮内嵌图标时on:click的e.target异常问题求助

问题分析 #

事件冒泡机制导致了这个问题：点击<i>图标时，事件会向上冒泡触发按钮的setOnAir函数，但e.target指向实际点击的<i>元素；而使用|self修饰符后，只有直接点击按钮本身（不包含子元素区域）才会触发事件，所以点击图标时没有反应。

解决方案 #

方案1：用e.currentTarget替代e.target #

在setOnAir函数里，把原本依赖e.target的逻辑换成e.currentTarget——它始终指向绑定事件的按钮元素，不受事件冒泡的影响，不管点击的是按钮本身还是内嵌图标。

示例代码：

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

<script>
  function setOnAir(e) {
    // 直接获取绑定事件的按钮元素
    const button = e.currentTarget;
    // 后续业务逻辑处理...
  }
</script>

方案2：给图标添加CSS点击穿透 #

给<i>元素设置pointer-events: none，让点击图标时的事件直接穿透到父按钮，此时e.target就会是按钮元素。

示例代码：

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

<style>
  .icon-click-through {
    pointer-events: none;
  }
</style>

方案3：手动向上查找按钮元素 #

如果需要兼容特殊场景，可以通过e.target.closest('button')向上查找最近的按钮元素，确保拿到目标元素：

function setOnAir(e) {
  const button = e.target.closest('button');
  if (button) {
    // 后续业务逻辑处理...
  }
}

其中方案1是最推荐的，符合Svelte事件处理的常规逻辑，无需额外修改样式或DOM查找操作。

内容的提问来源于stack exchange，提问作者Bart Cuijpers