Javascript 在兄弟姐妹之间切换时如何触发模糊事件

我有一个div，它包含一个input元素和span元素作为子元素。输入和范围是同级（具有公共父div）。所以我在div上有一个模糊事件，在span元素上有tabindex 0。因此，当我的焦点在输入元素上，当我制表符时，焦点会转移到范围，但会触发模糊事件。 在滑动之间切换时是否预期会触发此事件

反应代码：

<div className="box-v2"
          tabIndex={-1}
          onBlur={this._onBlur}>
           <input ref="inputBox"
            className="input-box"
            spellCheck={false}
            value={this.state.text}
            onChange={this._onChange} />

            <span className="icon"
                       tabIndex={0}/>
</div>

---

在React JS的世界中，我们可以假设这确实是意料之中的。如果说得通的话，那就是另一回事了

原因:

本机焦点和本机模糊事件不会出现气泡。相应的React事件处理程序onFocus和onBlur do bubble-dun

（来源：）

我创建了一个WebpackBin，您可以在其中测试和比较行为：

打开浏览器的开发控制台，webpackbin无法显示iframe的console.log，我想“并排”显示这两个示例

如您所见，React行为就是您描述的行为。聚焦输入字段，如果选项卡指向同级范围，它将触发

onBlur

事件

但在本机代码中，情况并非如此。如果将输入集中在那里，然后单击tab，则不会发生任何事情（当然，除了将焦点移动到同级范围之外）

如果对div进行对焦，然后再次离开对焦，则它也将触发

onBlur

事件