Paperback 
Event Propagation
Working Example
Description
When an event, such as a onPointerDown, onPointerOver, onPointerOut, etc., happens, the event will also propagate to its parent component.
In this example the top box, in row A, is a parent of all others beneath it. The two boxes in row B, are parents of the other boxes below them, etc.
Click any box in the working example, and you will see the boxes ancestors also lighting up and increasing there counter value.
To disable the propagation of events up through the hierarchy, use the events stopPropagation() method. E.g.,
function Box(props) {
return (
<mesh
{...props}
onPointerDown={(e) => {
e.stopPropagation()
}}
>
>{props.children}
</mesh>
)
}
GitHub Branch
git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
git checkout eventPropagation
npm install
npm start