onMount 和事件监听器

Question

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

1. 我有 2 个组件：App 和 Nested
2. App中有一个按钮，设置isShow = true，嵌套组件显示。
3. 在嵌套组件中有onMount 运行document.addEventListener('click')
4. 如果我点击App中的按钮，会挂载嵌套组件，事件监听器会立即附加到文档中，并且会处理在组件挂载之前点击的点击。

我猜它的发生是因为 Svelte 一次性完成。我试过await tick()，但没有用。

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

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

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

Answer 1

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