Why does preventDefault() on a parent element's click 'disable' a checkbox?

Question

I encountered this situation recently (simplified here). Simply wrap a checkbox with an element and apply preventDefault() on it\'s click event and the checkbox becomes unc

Answer 1

preventDefault prevents the browser's default action from being fired. Changing the checked state of a checkbox or following the href of an anchor, submitting a form, etc., are default actions. preventDefault prevents them, while allowing event propagation.

This is distinct from event propagation, (which you may – as you've noted – stop by stopPropagation). The event will propagate throughout the entire hierarchy of listeners before invoking the browser's default behavior (unless prevented).