Event bubbling is the propagation stage in which an event travels from its originating target toward outer targets. React event handlers use JSX properties such as onClick, and React makes all events bubble, including focus and blur. section 8.10 section 8.3.4
Use bubbling deliberately when handling nested interface elements:
- Let an outer handler respond when an inner element is activated. section 8.3.4
- Call evt.stopPropagation() when an inner interaction must not reach an outer listener. section 8.8.3
- Use evt.preventDefault() for unwanted browser actions, such as a form submission reload; it does not stop propagation. section 8.10
Closing a menu only from outside
An expandable menu can listen for pointerdown on window to close itself, then stop pointerdown events on the menu so clicks inside do not bubble to window. A useRef reference connects the React component to the menu DOM node, while effect cleanup removes both listeners. section 8.8.3
<label onFocusCapture={handler1} onFocus={handler3}>
<input onFocus={handler2} />
</label>
Trace focus from the input through the capture handler, target handler, and bubbling handler on the label. section 8.3.4
