Vue. js 모 바 일 웹 앱 클릭 관통 문제 해결 방안

묘사 하 다.
최근 모 바 일 엔 드 항목 중 한 페이지 는 탄 상자 알림 이 필요 하 며, 이 탄 상 자 는 닫 기 단 추 를 통 해 닫 힙 니 다.페이지 에서 iScroll 을 사용 하여 페이지 부분 스크롤 을 실현 하고 iScroll 설정 에서 tap 과 click 이 벤트 를 모두 열 었 습 니 다.코드 는 다음 과 같 습 니 다:

this.myScroll = new IScroll(this.$refs.wrapper, {
  mouseWheel: true,
  click: true,
  tap: true
})

실현 과정 에서 이상 한 문제 가 발생 했 습 니 다. 단추 의 위치 가 탄 상자 오른쪽 상단 의 닫 기 단추 위치 와 일치 하기 때문에 제 가 단 추 를 눌 렀 을 때 탄 상자 가 스 쳐 지나 갔습니다.
효 과 는 다음 과 같 습 니 다:
원인.
클릭 관통 이란 무엇 입 니까?
만약 페이지 에 두 개의 요소 A 와 B 가 있다 면.B 원 소 는 A 원소 위 에 있다.우 리 는 B 요소 의 touch start 이벤트 에 반전 함 수 를 등 록 했 습 니 다. 이 반전 함 수 는 B 요 소 를 숨 기 는 역할 을 합 니 다.우 리 는 우리 가 B 요 소 를 클릭 하면 B 요소 가 숨 어 있 고 그 후에 A 요소 가 click 사건 을 촉발 한 것 을 발견 했다.
인터넷 을 통 해 관련 자 료 를 찾 아 모 바 일 에서 책 을 뒤 져 보 니 모 바 일 에서 사건 의 촉발 순 서 는 touchstart - > touchmove - > touchend 이 고 click 사건 은 300 ms 의 지연 이 있 었 다. touchstart 사건 이 B 요 소 를 숨 긴 후에 300 ms 떨어져 브 라 우 저 는 click 사건 을 촉발 했다. 그러나 이때 B 요소 가 보이 지 않 았 다.그래서 이 사건 은 A 원소 에 파 견 됐 습 니 다.A 요소 가 링크 라면 페이지 가 의외로 이동 합 니 다.
해결 방안
1. 변경 touch 사건
프로젝트 가 Vue.js 를 사 용 했 기 때문에 여기 서 Vue.js 해결 방법 을 제공 합 니 다.vue - tap 의 플러그 인 을 사 용 했 습 니 다. 구체 적 인 사용 방법 은 공식 문 서 를 참조 하고 이 벤트 를 클릭 해 야 할 때 v-tap 명령 을 통 해 연결 합 니 다.

// main.js
import vueTap from 'v-tap' //     
Vue.use(vueTap) //     

v-tap="{methods:showReceiveModel}" //         

2. fastclick 플러그 인 사용
이것 도 인터넷 에서 볼 수 있 고 비 침 문 제 를 해결 할 수 있 습 니 다. 사용 방법 은 fastclick 문 서 를 볼 수 있 습 니 다. 여기 서 Vue.js 의 도입 과 사용 을 제공 합 니 다.

import FastClick from 'fastclick'; //     
FastClick.attach(document.body, options); //    fastclick

최종 적 으로 이 방안 을 사용 하지 않 은 것 은 Fastclick 과 같은 작은 버그 가 있어 서 클릭 이벤트 가 두 번 발생 하 는 문제 입 니 다.
기타tap 라 는 단어tap 라 는 단 어 를 사용 한 적 이 있 거나 Zepto 등 모 바 일 js 라 이브 러 리 를 사용 한 사람 은 tap 사건 이 낯 설 지 않 을 것 이다. PC 페이지 를 만 들 때 바 인 딩 KISSY 하고 해당 하 는 모 바 일 페이지 는 바 인 딩 click 할 것 이다.그러나 원생 tap 사건 자 체 는 없다 touch. js 창고 에서 제공 하 는 tap 사건 은 모두 모 의 한 것 이다.
휴대 전화 응답 tap 사건 은 300 ms 의 지연 이 있 을 것 이다. 그렇다면 이 300 ms 는 도대체 무엇 을 한 것 일 까?브 라 우 저 는 click 이후 약 300 ms 를 기다 릴 것 입 니 다. 이 유 는 사용자 가 더 블 클릭 touchend 행 위 를 했 는 지 판단 하기 때 문 입 니 다.（double tap） 행동 이 없 으 면 촉발 tap 사건 이 발생 하고 더 블 클릭 과정 에서 촉발 click 사건 이 적합 하지 않다.이 를 통 해 알 수 있 듯 이 click 사건 의 촉발 은 터치 사건 의 끝 을 대표 한다.
tap 사건 이 모 의 된 것 이 라 고 말 한 이상 click singleTap 사건 에 대한 처 리 를 볼 수 있 습 니 다.원본 코드 136 - 143 줄 을 보면 Zepto 응답 250 ms 가 조작 되 지 않 으 면 트리거 touchend 를 볼 수 있 습 니 다.
레 퍼 런 스
박문

터치 이벤트 와 클릭 관통 문제

모 바 일 페이지 클릭 관통 문제 해결 방안

관통 원리 및 해결 클릭

서적.

상기 일부 자 료 를 수집 하여 인터넷 에서 정리 합 니 다. 만약 에 잘못된 부분 이 있 으 면 제때에 알려 주 십시오. 여러분 의 비판 과 지적 을 환영 합 니 다. 감사합니다!