点击事件知道最初被点击的角色-优快云博客

本文链接：https://blog.youkuaiyun.com/weitao_11/article/details/132982537

文章讨论了如何在JavaScript中处理点击事件时，避免冗余代码并利用事件委托机制。通过阻止事件冒泡，仅在父节点触发特定事件，简化逻辑并提高代码效率。示例展示了如何在点击缩略图及其父组件时分别执行不同的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

实现一个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>