绑定 <svelte:window> 到 `onbeforeunload`

Question

我希望绑定到 <svelte:window> 但没有成功。

<!-- doesn't work -->
<svelte:window on:beforeunload={() => true} />

<!-- doesn't work -->
<svelte:window on:onbeforeunload={() => true} />

<!-- doesn't work -->
<svelte:window on:beforeUnload={() => true} />

在所有情况下，window.onbeforeunload 是 null

我最终选择了 window.onbeforeunload = () => true，但想知道为什么元素上的设置不起作用。

Answer 1

使用svelte:window

时需要设置事件returnValue

<script>

  function beforeUnload() {
    // Cancel the event as stated by the standard.
    event.preventDefault();
    // Chrome requires returnValue to be set.
    event.returnValue = '';
    // more compatibility
    return '...';
  }

</script>

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

原因是在 svelte 中写 on:event={handler} 等同于写 node.addEventListener(event, handler, options)

事实证明，当使用 addEventListener 附加 beforeunload 时，则 you need to set the event returnValue and/or return a value

However note that not all browsers support this method, and some instead require the event handler to implement one of two legacy methods:

assigning a string to the event's returnValue property

returning a string from the event handler.

使用window.onbeforeunload注册事件只需要一个return值

绑定 <svelte:window> 到 `onbeforeunload`

Bind <svelte:window> to `onbeforeunload`

svelte

svelte-3