jQuery touchstart touchmove toconthend interactivity

Question

탭을 누를 때 세부 정보를 표시하도록 확장하거나 축소하는 몇 개의 작은 상자가있는 페이지가 있습니다. 지금은 touchstart 이벤트 핸들러를 사용하여 확장/축소를 트리거하고 모든 것이 아름답게 작동합니다.

내가 겪고있는 유일한 문제는 페이지를 스크롤하기 위해 스 와이프하려고 할 때 첫 번째로 터치 한 위치가이 상자 중 하나에 있으면 확장을 트리거하고 event.preventDefault() 터치 스타트 이벤트 핸들러 내에서 호출 중이면 사용자가 스크롤하는 것을 방지합니다. 나는 무엇인가하고 싶습니다. 스 와이핑 할 때 터치 스타트 이벤트를 무시함으로써 상자를 확장하지 않고 스크롤 할 수 있습니다.

내 첫 번째 본능은 확장/축소 기능을 touchstart에서 touchend로 간단히 이동 한 다음 touchmove 용 상자에 핸들러를 연결하고 스크롤을 시작할 때 발생하는 것을 방지하는 event.stopImmediatePropagation()을 호출하는 것이 었습니다. 그러나 터치 스탁은 매우 빠르고 반응이 빠르며 멋지게 작동하는 반면,이 작업은 터치 스퀘어만큼 반응이 좋지 않은 것처럼 보입니다.

iPad (Safari 및 Chrome에서 테스트 한 4th gen)에서 테스트를 마쳤습니다. 매우 민감한 부분이 있습니다. 나도 Nexus 10 Android 태블릿 (Chrome)에서 테스트했으며 touchend는 전혀 작동하지 않는 것 같습니다.

누구나 1) 내가 설명한 해결책을 개선 할 수있는 방법이나 2)이 문제를 해결하는 다른 방법에 대한 조언이 있습니까?

Answer 1

요즘 새로운 프로젝트에 대비하여 터치 이벤트를 연구하고 있고, 내가 당신을 도울 수있는 또 다른 한개에 유래 가로 질러 : prevent touchstart when swiping