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

Question

我有一个 div，其中包含一个 input 元素和一个 span 元素作为子元素。输入和跨度是兄弟姐妹（具有共同的父 div）。所以我在 div 上有一个模糊事件，我在 span 元素上有 tabindex 0。因此，当我的焦点在输入元素上并且当我选择焦点时，焦点转移到 span 但模糊事件被触发。在 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>

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，我想显示两个示例 "side by side"。

如您所见，React 行为就是您所描述的行为。您将焦点放在输入字段上，如果您切换到兄弟跨度，它将触发 onBlur 事件。

但在本机代码中，情况并非如此。如果您将输入焦点放在那里然后使用 tab 键，则什么也不会发生（当然，除了将焦点移至兄弟跨度。

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

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

How does blur event gets fired when tabbing between siblings

javascript

onblur

reactjs