我有一个 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>
最佳答案
在 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
事件。
关于javascript - 在 sibling 之间切换时如何触发模糊事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44929424/