防止事件传播给儿童

Question

我正在构建一个 React 组件，将其包裹在其他组件周围，这些组件将使子组件变灰并（希望）使它们对点击不做出反应。

我的做法是：

const TierGater: React.FC = (props) => {
  const handleTierGaterClick = (e: React.MouseEvent<HTMLDivElement>) => {
    console.log("outer - should be called");
    // e.stopPropagation();
    // e.preventDefault();
  };

  return (
    <div onClick={handleTierGaterClick}>
      <div
        onClick={() => {
          console.log("inner - should not be called");
        }}
      >
        {props.children}
      </div>
    </div>
  );
};

export default TierGater;

我希望这是一个通用的解决方案，允许我任意包装组件，而无需修改子组件的 onClick。

我已经扫描了各种解决方案，但我的理解是事件处理程序将从孩子的命令触发到父母的命令。上面示例的控制台日志证实了这一点（首先调用内部）。

我相信我可以更改子项以检查事件目标并基于此中止 onClick 逻辑，但这违背了组件的目的 - 它应该环绕任何子项而不修改子项。

以上可能吗？如果是，需要进行哪些改变？

附带问题：我的事件处理程序的类型为React.MouseEvent<HTMLDivElement>- 如何使其同时适用于鼠标和触摸事件？

Answer 1

使用onClickCapture，您可以在捕获阶段拦截事件，然后将其传递给子级，并阻止它们传播：

<div onClickCapture={handleTierGaterClick}>

const handleTierGaterClick = (e: React.MouseEvent<HTMLDivElement>) => {
  e.stopPropagation();
  e.preventDefault();
};

为了更加 UI 友好，褪色的背景也许pointer-events: none也会很好。