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

【问题标题】：How does blur event gets fired when tabbing between siblings在兄弟姐妹之间切换时如何触发模糊事件
【发布时间】：2017-12-09 07:27:50
【问题描述】：

我有一个 div，其中包含一个 input 元素和 span 元素作为子元素。输入和跨度是兄弟姐妹（具有共同的父 div）。所以我在 div 上有一个模糊事件，我在 span 元素上有 tabindex 0。因此，当我的焦点在输入元素上并且当我选项卡时焦点转移到 span 但会触发 blur 事件。在 sliblings 之间切换时是否会触发此事件？

反应代码：

<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>

【问题讨论】：

标签： javascript reactjs onblur

【解决方案1】：

在 React JS 的世界中，我们可以假设它确实是意料之中的。如果说得通，那就另当别论了。

原因：

原生焦点和原生模糊事件不会冒泡。对应的 React 事件处理程序 onFocus 和 onBlur 会冒泡 - dun dun dun。

（来源：https://github.com/facebook/react/issues/6410#issuecomment-207064994）

我创建了一个 WebpackBin，您可以在其中测试和比较行为： https://www.webpackbin.com/bins/-KoJBHpK9s_OA76FnLkv

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

如您所见，React 行为就是您所描述的行为。您聚焦输入字段，如果您选择同级跨度，它将触发 onBlur 事件。

但在本机代码中，情况并非如此。如果您将输入集中在此处然后按 Tab，则不会发生任何事情（当然，除了将焦点移动到同级跨度之外。

如果您聚焦 div 然后再次离开焦点，那么它也会触发 onBlur 事件。

【讨论】：