+ buttons/checkboxes

I’m trying using <ion-item href='#/item/:id'> in combination with checkboxes and/or buttons on the ion-item. The goal being all 3 tap zones are handled independently (with the non-button/checkbox zone taking you to the item details). The result looks like this codepen. But what happens is if you click the button or the checkbox, it also activates the href and takes you to the item details page. I figure the solution might be something with css positioning on the checkboxes / buttons, or some fiddling of $event.stopPropagation() or the like, but I’ve spend a long while fiddling to no avail.

Note: the codepen isn’t functioning per above, but shows the gist. This is HabitRPG, in case the more concrete example/code is desired.