javascript - 在 sibling 之间切换时如何触发模糊事件

Question

我有一个 div，其中包含一个 input 元素和 span 元素作为子元素。输入和跨度是 sibling (具有共同的父级 div)。所以我在 div 上发生了模糊事件，并且在 span 元素上发生了 tabindex 0。因此，当我的焦点位于输入元素上并且当我选项卡时，焦点会转移到跨度，但会触发模糊事件。在 sliblings 之间进行 Tab 键切换时是否会触发此事件？

react 代码:

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

Answer 1

在 React JS 的世界里，我们可以假设这确实是预期的。如果有道理，那就是另一个故事了。

原因:

Native focus and native blur events don't bubble. Corresponding React event handlers onFocus and onBlur do bubble - 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 行为就是您所描述的行为。您将焦点放在输入字段上，如果您按 Tab 键切换到同级范围，它将触发 onBlur 事件。

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

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