Svelte中on:click事件移动端按钮颜色切换功能异常

问题根源 #

你代码里的toggleFilter函数依赖e.target.innerHTML匹配过滤项，但在移动端，点击按钮内的文本时，e.target指向的是文本节点而非<button>元素，导致获取的内容为空或不匹配，找不到对应的filter，状态切换逻辑执行失败。桌面端点击时e.target通常直接是按钮元素，所以功能正常。

解决方案（推荐第一种） #

方案1：直接传递filter对象到事件函数

不用通过事件目标去查找，直接在循环里把当前的filter传给toggleFilter，逻辑更简单可靠：

修改按钮的点击绑定：

<button on:click={() => toggleFilter(filter)} class="p-2 hover:bg-primary-500 {filter.color ? 'bg-primary-500' : 'bg-surface-900'}">{filter.filter}</button>

修改toggleFilter函数：

const toggleFilter = (filter) => {
    filter.color = !filter.color;
    filters = [...filters]; // 触发Svelte响应式更新
}

方案2：使用e.currentTarget替代e.target

currentTarget永远指向绑定事件的元素（也就是按钮本身），不受子节点影响，同时记得用trim()处理文本避免空格干扰：

const toggleFilter = (e) => {
    const filterText = e.currentTarget.innerHTML.trim(); // 用currentTarget并去除空格
    const index = filters.findIndex((f) => f.filter === filterText);
    if (index !== -1) {
        filters[index].color = !filters[index].color;
        filters = [...filters];
    }
}

说明 #

方案1完全规避了事件目标的不确定性，代码更简洁，是Svelte处理这类循环内事件的常规写法；方案2则在原有逻辑基础上修复了目标元素的问题，两种方式都能解决移动端的切换失效问题。

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