Svelte中点击事件更新Store延迟一步问题求助

数据老陈

2026-7-22

问题本质

你的问题源于事件触发顺序：复选框的on:click回调会先于window上的click事件执行。点击复选框时，checkboxClicked先运行，此时window的click事件还未触发，store仍保留上一次的旧值；等checkboxClicked执行完毕，window的click事件才会更新store，所以看起来像是store更新延迟了一步。

解决方案

方案1：直接在复选框事件中获取Shift状态（最优解）

不需要依赖全局window事件，直接在复选框的点击回调里通过事件对象拿到当前的shiftKey状态，同时可以同步更新store：

<script>
import { is_shift_pressed } from './stores/store';

function checkboxClicked(e) {
  const currentShiftState = e.shiftKey;
  console.log(currentShiftState);
  // 同步更新store
  is_shift_pressed.set(currentShiftState);
}
</script>

<input type="checkbox" on:click={checkboxClicked}/>

方案2：调整全局事件的触发时机（若需统一处理所有点击）

如果必须通过全局事件监听来维护Shift状态，可以改用mousedown事件（它会在click事件之前触发），确保store在复选框的click回调执行前完成更新：

<script>
import { is_shift_pressed } from './stores/store';
import { onMount } from 'svelte';

function updateShiftState(e) {
  is_shift_pressed.set(e.shiftKey);
}

onMount(() => {
  window.addEventListener('mousedown', updateShiftState);
  // 组件销毁时移除监听，避免内存泄漏
  return () => window.removeEventListener('mousedown', updateShiftState);
});

function checkboxClicked() {
  console.log($is_shift_pressed); // 此时已拿到最新状态
}
</script>

<input type="checkbox" on:click={checkboxClicked}/>