Javascript 焦点顺序 - div 的模糊事件发生在焦点之前？

如何解决Javascript 焦点顺序 - div 的模糊事件发生在焦点之前？

在这个 codesandbox 应用程序中，我有两个视图

1. 显示视图 - 是一个在获得焦点时打开“编辑器视图”的 div。
2. 编辑器视图 - 有一个包含 TextField（在打开编辑器视图时获得焦点）和一个按钮的包装 div。单击按钮将带您返回显示视图。我正在将执行顺序打印为控制台日志以跟踪执行顺序。

关于每个视图中事件的顺序，我有几个问题，如下所示：

1. 当我单击“显示”视图时，我看到以下顺序 执行。

calling _displayView_displayDiv_OnFocus 
calling _editorView_editorDiv_OnBlur 
calling _editorView_editorDiv_OnFocus

• 为什么编辑器视图、编辑器 div 的 onBlur 在它之前被调用 获得焦点？
• 为什么要调用编辑器视图、编辑器 div 的 onBlur？是 是因为 TextField 从中窃取了焦点？

2. 当我在编辑器视图中单击按钮返回到显示视图时，执行顺序如下。

inside _textFieldOnBlur
calling _editorView_editorDiv_OnBlur
calling _editorView_editorDiv_OnFocus

• 再说一次，为什么 _editorView_editorDiv_OnBlur 在 _editorView_editorDiv_OnFocus 之前被调用？这就是我感到困惑的原因 - 一个孩子（在这种情况下，TextField 的模糊不应导致 _editorView_editorDiv 的 blur 被调用，因为 blur 事件不会冒泡。所以， _editorView_editorDiv 必须有 focus 才能blur变红，但我没有看到 _editorView_editorDiv 在 blur 发生之前获得焦点。