能否在JavaScript中串联重叠的onClick事件？无需传参给子元素

当然可以做到，核心是利用事件冒泡的特性，结合自定义属性或自定义事件来收集各层级的触发信息，完全不需要给子元素传递额外参数。下面给你两种可行的实现方案：

方案一：利用DOM自定义属性+父元素事件监听 #

这种方案不需要给每个子元素写独立的onClick，而是通过给元素标记自定义属性存储参数，再在父容器的点击事件里遍历DOM链收集所有参数：

function NestedClickDemo() {
  const handleCollectEvents = (e) => {
    const collectedParams = [];
    let currentEl = e.target;
    const container = e.currentTarget;

    // 从点击的元素向上遍历，直到容器的父元素为止
    while (currentEl && currentEl !== container.parentElement) {
      // 获取自定义属性里的参数
      const param = currentEl.dataset.clickParam;
      if (param) {
        collectedParams.push(param);
      }
      currentEl = currentEl.parentElement;
    }

    // 这里就能拿到所有层级的参数，顺序是从子到父
    console.log('收集到的事件参数:', collectedParams); // 点击子div时输出 ["b", "a"]
  };

  return (
    <div onClick={handleCollectEvents}>
      <div data-click-param="a">
        <div data-click-param="b">点击我</div>
      </div>
    </div>
  );
}

原理说明 #

点击子元素时，事件会通过冒泡传递到父容器的handleCollectEvents函数。我们从触发事件的目标元素开始，向上遍历DOM树，收集所有带有data-click-param属性的元素值，最终得到所有层级的触发参数。

方案二：自定义事件+父级监听 #

如果想保留每个元素独立的onClick逻辑，可以通过派发自定义事件的方式，把参数传递出去，再统一收集：

import { useState, useEffect } from 'react';

function CustomEventDemo() {
  const [eventQueue, setEventQueue] = useState([]);

  useEffect(() => {
    const handleCustomClick = (e) => {
      // 把每次触发的参数加入队列
      setEventQueue(prev => [...prev, e.detail]);

      // 用setTimeout等待所有冒泡事件执行完毕，再统一处理
      setTimeout(() => {
        console.log('收集到的事件参数:', eventQueue.concat(e.detail)); // 点击子div时输出 ["b", "a"]
        // 处理完成后清空队列
        setEventQueue([]);
      }, 0);
    };

    // 在父容器上监听自定义事件
    const container = document.getElementById('click-container');
    container.addEventListener('customClick', handleCustomClick);

    return () => {
      container.removeEventListener('customClick', handleCustomClick);
    };
  }, [eventQueue]);

  return (
    <div id="click-container">
      <div onClick={() => {
        // 派发自定义事件，携带参数a
        this.dispatchEvent(new CustomEvent('customClick', { detail: 'a' }));
      }}>
        <div onClick={() => {
          // 派发自定义事件，携带参数b
          this.dispatchEvent(new CustomEvent('customClick', { detail: 'b' }));
        }}>点击我</div>
      </div>
    </div>
  );
}

原理说明 #

每个元素的onClick触发时，会派发一个携带参数的自定义事件。由于事件冒泡，这些自定义事件会依次传递到父容器的监听函数中。我们用队列暂存参数，再通过setTimeout等待所有冒泡事件执行完毕后，一次性获取所有参数。

补充说明 #

你原来的代码中，点击子div时会先执行子元素的foo("b")，再执行父元素的foo("a")，这是因为事件冒泡的顺序是从子元素到父元素。上面的两种方案都是基于这个特性实现的，最终收集到的参数顺序也是子在前、父在后，符合你示例中的预期。

内容的提问来源于stack exchange，提问作者Axeltherabbit