Question

我有一个包含input元素和span元素的div作为子元素。输入和跨度是兄弟姐妹（具有共同的父div）。所以我在div上有一个模糊事件，我在span元素上有tabindex 0。因此，当我的焦点在于输入元素时，当我选择焦点时，焦点会转移到span但是模糊事件会被触发。这种事件是否会在标签之间进行标记？

反应代码：

<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的世界中，我们可以假设它确实是预期的。如果它有意义，那就是另一个故事。

原因：

原生焦点和原生模糊事件不会冒泡。对应的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，我想同时显示两个示例＆＃34;并排＃34;。

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

但是在本机代码中，这不是发生的事情。如果您将输入聚焦在那里然后选项卡，则没有任何反应（当然，除了将焦点移动到兄弟范围之外。

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

在兄弟姐妹之间进行选项卡时，如何触发模糊事件

1 个答案: