Javascript 如何为具有嵌套输入字段的div实现onBlur/onFocus？

有一个

和两个嵌套的

s<每次用户单击其中一个

s时，code>onBlur都会触发。
当我击中

div

中的某个对象时，会发生

onBlur

的情况，这有点令人沮丧。经过一个小时的搜索，我仍然无法找到任何好的解决方案。
此代码示例显示了我所说的内容：

class Thing extends React.Component {
  handleBlur(e) {
    console.log('blur');
  }
  handleFocus(e) {
    console.log('focus');
  }
  render() {
    return (
      <div onFocus={this.handleFocus} onBlur={this.handleBlur} tabIndex="1">
        <div>
          <input type="text" value="Hello," />
        </div>
        <div>
          <input type="text" value="Thing" />
        </div>
      </div>
    );
  }
}

类扩展了React.Component{
车把（e）{
console.log（'blur'）；
}
手焦点（e）{
console.log（'focus'）；
}
render（）{
返回(
);
}
}

您可以随意使用代码。

---

但是，我的最终目标是使其正常工作。

您可能希望忽略额外的模糊事件

handleBlur(e) {
   if (e.target.tagName == "INPUT") {
      return;
   }
   console.log('blur');
}
handleFocus(e) {
   console.log('focus');
}

---

把输入分成一个独立的组件怎么样

app.js

class Thing extends React.Component {
  handleBlur(val, event) {
    console.log(val, event);
  }
  handleFocus(val, event) {
    console.log(val, event);
  }

  data = ['Hello, ', 'Thing'];

  render() {
    return (
      <div tabIndex="1">
        {this.data.map((v, i) => <Input value={v} key={i} onFocus={this.handleFocus} onBlur={this.handleBlur} />)}
      </div>
    );
  }
}

import React from 'react';

export class Input extends React.PureComponent {

  handleF = () => {
    this.props.onFocus(this.props.value, 'focus');
  }

  handleB = () => {
    this.props.onBlur(this.props.value, 'blur');
  }

  render() {
    return <input type="text" onFocus={this.handleF} onBlur={this.handleB} />;
  }
}

export default Input;

---

这是上面的评论，他找到了以下对他（现在是我）有效的解决方案，并将其发布在评论中。我把它转载到这里，是为了任何一个不想从评论中挖掘的人

基本上，如果e.relativeTarget在parentElement链中的任何位置都有e.currentTarget，我只需检查每个模糊事件

---

但您到底想要实现什么？它们必须分开工作？@Kinduser如果当用户点击

中的任何内容时onBlur不会发生，那就太好了。这看起来不错，但这并不是我想要实现的目标。我的想法是有一个

，无论单击其中的哪个元素都能保持焦点。这似乎是一个好方法，如果我能定义e.target是否是

@dmigo的子元素之一，那么这将是一个完美的解决方案，严格通过

target

访问DOM不是一个好的解决方案，尤其是在某些情况下，用户建议使用比仅使用

target

更复杂的方法。你怎么看？@dmigo这个解决方案已经有9年历史了。检查：@Kinduser为我工作。但不确定它是否可以被视为一种干净的解决方案。基本上，如果

e.relativeTarget

在

parentElement

链中的任何位置都有

e.currentTarget

，我只需检查每个

blur

事件。