触发一个事件来警告客户以 svelte 保存他的更改

Question

我想警告用户在离开页面之前保存他的更改（表单更改）。如果他点击窗口上的任意位置，我想触发此警报。它可能是后退按钮或重新加载或页面上可用的任何导航链接。有人可以帮忙吗？

Answer 1

您应该在窗口上使用“beforeunload”事件，请参阅此处

在 svelte 中，您可以使用特殊元素订阅 window 上的事件<svelte:window/>：

<script>

  let dirty = true; // document has changes to save

  function beforeUnload() {
    if (dirty) {
        event.preventDefault();
        event.returnValue = '';
        return '';
    }
  }

</script>

<svelte:window on:beforeunload={beforeUnload}/>