I was trying to put together a “1 item at a time” type interaction in a prototype, and trying to find a work around for there not being a “click outside” and discovered what I think is an interesting limitation to interactive components: some reactions only work on the top most interactive component in a stack.
See this prototype for what I’m describing
Overlapping Interactive Components (Prototype)
- On Click Only top component
- On Drag Only top component
- While Hovering Affects all interactive components being hovered over.
- While Pressing Only top component
- Keypress Only top component (This one really surprised me)
- Mouse Enter/Mouse Leave Affects all interactive components that the mouse has entered/left
- Mouse Down/Mouse Up Only top component
- After Delay Affects all interactive components on the page