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)
Overlapping Interactive Components (File)
Reactions
- ❌ 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