모바일 단말기에서 가장 권장되는 작성 방법은 클릭 대신 zepto의 탭 이벤트를 사용하는 것입니다. 그 이유는 일반적으로 클릭 이벤트에 전설적인 300ms 지연이 있기 때문입니다.
그러나 실제 테스트에서는 클릭 이벤트가 탭 이벤트보다 빠른 것으로 나타났습니다.
클릭 및 탭의 트리거 지연은 약 100ms에 불과합니다
모바일 단말이 zepto의 탭 이벤트를 사용하면 조금 투명해집니다.
일반적인 이유는 상위(보통 마스크 레이어) DOM이 탭 이벤트에서 닫히거나 숨겨져 있고, 하위 DOM에도 클릭 이벤트가 있어서 이벤트 흐름 메커니즘으로 인해 하위 DOM이 실패하게 되기 때문입니다( 버블링 캡처) 클릭 이벤트도 트리거됩니다.
분석: 모두 버블링 단계(이벤트가 트리거될 때 기본 버블링 단계)에 있는 경우 부모는 하위 집합 이후에 확실히 트리거되며 포인트 스루 현상이 없어야 합니다.
일부 블로그 기사에서는 상위 항목이 탭을 사용하고 하위 항목이 클릭을 사용한다고 나와 있습니다. 데모의 트리거 시간을 살펴보면 이런 일이 발생할 가능성은 거의 없습니다.
주된 이유는 동일한 비즈니스 로직에서 클릭과 탭을 동시에 사용하는 바보가 있을 것이라는 것입니다.
그래서 기본적으로 캡처 단계는 주로 동시에 이벤트를 트리거하는 데 사용되는 것처럼 느껴집니다. 하지만 Zepto의 이벤트 메커니즘은 이벤트 버블링을 기반으로 하며 touch.js의 이벤트는 문서에 바인딩되어 있다는 문제도 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
past 탭을 사용하거나 FastClick.js
를 소개합니다
인용을 권장합니다
fastclick.js,可以解决click이벤트가 300밀리초 지연됩니다공식 홈페이지 https://github.com/ftlabs/fas...
zepto의 탭 이벤트는 시뮬레이션일 뿐이며 당연히 기본 클릭 응답만큼 빠르지는 않습니다. 비교적 간단한 요구 사항(예: "클릭" 이벤트에만 응답하면 되는 경우)인 경우 fastclick 사용을 고려할 수 있습니다. 장점은 원래 클릭 이벤트 처리를 변경할 필요가 없으며 조정할 수 있다는 것입니다. PC와 모바일 단말기 모두에. 하지만 이것이 모바일 요구 사항일 경우에만 기본 touchstart 이벤트를 사용하세요.
또 다른 솔루션은 Hammerjs 또는 Tencent의 AlloyFinger와 같은 제스처 라이브러리를 직접 사용하는 것입니다. 이는 더 복잡한 제스처 요구 사항이 있는 시나리오에 적합합니다.
터치스타트를 고려해 보세요
클릭 이벤트의 원인을 수정하세요. 버블링 메커니즘 때문이 아니라 클릭 이벤트 지연 때문입니다.
예를 들어 닫기 버튼을 클릭하면 touchend가 먼저 탭을 실행하고 팝업 레이어와 마스크가 숨겨집니다. 터치엔드 후 계속 300ms를 기다려 다른 동작이 없음을 확인한 후 계속해서 클릭을 트리거합니다. 이때 팝업 레이어가 사라졌기 때문에 현재 클릭 이벤트의 대상은 기본 요소에 있으므로 기본 이벤트 콘텐츠가 트리거됩니다. 전체 이벤트 트리거 프로세스는 touchend -> tap -> click입니다.