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

编程问答 2022-05-21

问题描述

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

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

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

  1. 当我单击“显示”视图时，我看到以下顺序 执行。
calling _displayView_displayDiv_OnFocus 
calling _editorView_editorDiv_OnBlur 
calling _editorView_editorDiv_OnFocus
  • 为什么编辑器视图、编辑器 div 的 onBlur 在它之前被调用 获得焦点？
  • 为什么要调用编辑器视图、编辑器 div 的 onBlur？是 是因为 TextField 从中窃取了焦点？
  1. 当我在编辑器视图中单击按钮返回到显示视图时，执行顺序如下。
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 发生之前获得焦点。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

blurblurfocusfocusjavascriptonbluronfocus