onMount和事件监听器

Question

如果我添加document.addEventListener并单击onMount，则会发现一个奇怪的行为。

1. 我有2个组成部分：应用和嵌套
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的第三个参数。之所以可行，是因为该事件在附加嵌套事件侦听器时已离开捕获阶段，并且现在处于冒泡阶段。