为了防止单击子元素时触发父元素上的事件，可以使用stopPropagationJavaScript 中的方法。此方法会阻止事件冒泡到父元素。

以下是如何在 React 应用程序中实现此目的：

stopPropagation在 React 中使用解决方案

1. 子组件中的事件处理： 向子元素添加事件监听器，并用于event.stopPropagation()防止点击事件传播到父元素。
2. 父组件中的事件处理： 照常向父元素添加点击事件监听器。

下面是一个完整的例子来演示这一点：

import React from 'react';

const Child = ({ onClick, color }) => (
  <div
    onClick={(e) => {
      e.stopPropagation();
      onClick();
    }}
    style={{ backgroundColor: color, padding: '20px', margin: '10px', cursor: 'pointer' }}
  >
    {color}
  </div>
);

const Parent = () => {
  const [flipped, setFlipped] = React.useState(false);

  const handleParentClick = () => {
    setFlipped(!flipped);
  };

  const handleChildClick = (color) => {
    console.log(`Child ${color} clicked`);
  };

  return (
    <div
      onClick={handleParentClick}
      style={{ padding: '50px', border: '2px solid black', cursor: 'pointer' }}
    >
      {flipped ? (
        <div>
          <Child onClick={() => handleChildClick('red')} color="red" />
          <Child onClick={() => handleChildClick('blue')} color="blue" />
          <Child onClick={() => handleChildClick('green')} color="green" />
        </div>
      ) : (
        <div>Click to flip</div>
      )}
    </div>
  );
};

export default Parent;

解释：

• 子组件：
• 该Child组件接收一个onClick函数和一个colorprop。
• 它div使用指定的背景颜色进行渲染。
• 调用onClick上的处理程序会阻止事件冒泡到父级，然后调用作为 prop 传递的函数。div``e.stopPropagation()``onClick
• 父组件：
• 组件Parent维持一个flipped状态来确定是否显示子元素。
• 当单击父元素时，该handleParentClick函数切换状态。flipped
• 该handleChildClick函数传递给每个Child组件并记录单击了哪个子组件。

此解决方案无需 CSS 技巧或全局引用，直接解决了事件传播问题。此stopPropagation方法是管理嵌套组件中事件处理的一种简洁有效的方法。