Prevent event from propagating to children

user_3000014 0
Viewed 1232

I am building a React component to be wrapped around other components that will grey-out the children and (hopefully) make them unreactive to clicks.

My approach is:

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;

I would like this to be a generic solution that allows me to wrap components arbitrarily without needing to modify the onClick of children components.

I have scanned various solutions but my understanding is that event handlers will fire from children to parents order. This is corroborated by console logs for the above example (inner called first).

I believe I can change the children to inspect the event target and abort onClick logic based on that, but this defeats the purpose of the component - it should wrap around any children without modifying the children.

Is the above possible? If yes, what changes would need to be introduced?

Side question: my event handler is typed with React.MouseEvent<HTMLDivElement> - how can I make this work with both mouse and touch events?

typescript reactjs onclick
1 Answers

With onClickCapture, you can intercept the events in the capturing phase, before they've made it down to the children, and stop them from propagating:

<div onClickCapture={handleTierGaterClick}>

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

To be more UI-friendly, a faded background and perhaps pointer-events: none would be good too.

user_95152070
Related