点击事件知道最初被点击的角色

需求：

• 实现一个box点击事件
• 在点击到box 的时候需要触发success 事件
• 但是在点击 当前这个box 的父节点的时候需要触发 warning 事件
• 在点击 父亲的父亲节点的时候需要触发 error 事件
• 并且在触发某个事件的时候需要关闭当前的事件

进程：

• 最普通的做法，在每个节点上都设置阻止冒泡的行为event.stopPropagation()，并且关闭所有的事件同时触发当前的事件
• 这个做法看起来没啥毛病，但是会有一堆冗余的代码在里面， 比如 stopPropagation 就要执行多次，并且在实现事件的时候，很有可能会有类似的行为逻辑
• 比如，有一张缩略图，我们点击缩略图的时候需要给这张图一个高亮色，并且放大图片，但是如果我们只点击缩略图的父组件，那么要缩小图片，并且高亮
• 那我们高亮的逻辑就要做两次
• 使用 e.target.parentNode， 如果是点击冒泡的话，这个行为会指向冒泡的父节点
• 这个逻辑的好处是每个地方只需要管理自己的逻辑，比如点击小图，就只需要放大小图就好，高亮是父节点也同时有的逻辑，就直接交给父节点，父节点只需要在缩小图片的时候判定一下是不是存在图片的上级就好

<div
  onClick={(e) => {
	this.props.onChangeIdx(value)
    this.setState({
     activeCell: {row: columnIndex, column: cellIndex},
    })
    if ("partImageBox" !== e.target.parentNode.className) {
        this.setState({
        showPartImage: false,
    })
  }
 }}
  className={`${activeCell ? styles.activeCell : ""}`}
 >
  <div
      className={'partImageBox'}
      onClick={(e) => {
        this.showPartImageBox(value, e.target.parentElement);
     }}
  >
    <img src={PicIcon}/>
  </div>
</div>

拓展：

• 在使用 e.target.parentNode 的时候，如果不存在冒泡的上级，那他就会找到真正的上级，也就是当前元素的父节点