I've got a page with a few small boxes which expand/collapse to show details when you tap them. Right now I'm using the touchstart event handler to trigger the expand/collapse, and everything works beautifully.
The only issue I'm having is that when you try to swipe to scroll the page, if the first place you touch happens to be within one of these boxes, it triggers the expand, and because event.preventDefault() is being called within the touchstart event handler, it prevents the user from scrolling. What I'd like to happen is that you can swipe to scroll without expanding the box at all if you happen to touch it, by ignoring the touchstart event when swiping.
My first instinct was to simply move the expand/collapse functionality from touchstart to touchend, then attach a handler to the boxes for touchmove and call event.stopImmediatePropagation(), which prevents touchend from firing when you start scrolling. This works, however, touchend doesn't seem to be as responsive as touchstart, as it takes a fairly long deliberate touch in order to fire it, whereas touchstart was very quick and responsive and worked wonderfully.
I've done my testing on an iPad (4th gen, tested in Safari and Chrome), and this is where touchend is not very responsive. I also tested on a Nexus 10 Android tablet (Chrome), and touchend does not seem to be firing at all.
Does anyone have any advice on either 1) a way to improve on the solution I have outlined or 2) another way of going about this?
