将 <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

returnValue使用时需要设置事件svelte:window

<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}/>

这样做的原因是，on:event={handler}用 svelte 书写，相当于书写node.addEventListener(event, handler, options)

事实证明，当附加beforeunloadusing时addEventListener，您需要设置事件returnValue和/或返回一个值

但请注意，并非所有浏览器都支持此方法，有些浏览器需要事件处理程序来实现以下两种旧方法之一：

• 将字符串分配给事件的 returnValue 属性
• 从事件处理程序返回一个字符串。

window.onbeforeunload使用只需要一个返回值来注册事件