onMount 和事件监听器

Question

如果我添加document.addEventListener点击，我发现了一个奇怪的行为onMount。

1. 我有 2 个组件：应用程序和嵌套
2. App中有一个按钮，可以设置isShow = true，嵌套组件显示。
3. 在嵌套组件中有onMount运行的地方document.addEventListener('click')
4. 如果我单击应用程序中的按钮，将安装嵌套组件，事件侦听器将立即附加到文档，并且将处理在组件安装之前单击的单击。

我猜这是因为 Svelte 一次性完成的。我尝试过await tick()，但没有帮助。

我看到解决方案之一是包装document.addEventListener到setTimeout. 它有效，但我认为这是一个错误的决定。

那么，这是正常行为还是错误？

这是一个示例： https://svelte.dev/repl/c89c272ca6c245dabf8451ba950d10c0 ?version=3.6.8

Answer 1

这是预期的行为。最简单的解决方案可能是将{ capture: true }（或只是true）添加为addEventListenerand的第三个参数removeEventListener：https://svelte.dev/repl/daee8509d6634a68b2cf35e53f660e34?version=3.6.8。这是有效的，因为在附加嵌套事件侦听器时事件已离开捕获阶段，并且现在处于冒泡阶段。