Skip to content


 Zabbix
 Grafana
 Prometheus
 React Three Fiber
 Threejs and TypeScript
 SocketIO and TypeScript
 Blender Topological Earth
 Sweet Home 3D
 Design Patterns Python
 Design Patterns TypeScript
   
 Course Coupon Codes
Three.js and TypeScript
Kindle Edition
$6.99 $9.99 Paperback 
$22.99 $29.99




Design Patterns in TypeScript
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99




Design Patterns in Python
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99




Event Propagation

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>
  )
}

Working Example