vue 의 touch Start 이벤트 및 click 이벤트 충돌 문제 해결

1.문제:
오늘 이러한 문제 가 발생 하면 어떤 요소 에 touch Start 와 click 이 벤트 를 동시에 연결 한 후 모 바 일 장치 에서 클릭 하면 이 두 이 벤트 를 순서대로 출발 합 니 다.모 바 일 장치 의 click 이벤트 트리거 는 300 ms 지연 되 기 때문에 touch Start 이벤트 가 먼저 트리거 된 후에 click 이 벤트 를 촉발 합 니 다.이렇게 해서 매번 두 번 씩 집행 해 야 한 다 는 것 은 무의미 하 다.PC 는 touch 관련 사건 을 식별 할 수 없다 는 것 을 알려 줍 니 다.
해결 방법
(1)preventDefault 방법
preventDefault 방법 을 사용 하여 해결 합 니 다.touch start 에 e.preventDefault()를 추가 하면 click 이벤트 의 촉발 을 막 을 수 있 습 니 다.
템 플 릿

 <ul class="list">
 <li class="item" v-for="item of letters"
 :key="item"
 :ref="item"
 @touchstart="handleTouchStart"
 @click="handleleterClick"
 >{{item}}</li>
 </ul>

위의 템 플 릿 은 vue 이벤트 수정자@touch start.stop.prevent 를 사용 하여 구현 할 수 있 지만,method 의 handle Touch Start 는 e.preventDefault()를 추가 하지 않 아 도 됩 니 다.

 <ul class="list">
 <li class="item" v-for="item of letters"
 :key="item"
 :ref="item"
 @touchstart.stop.prevent="handleTouchStart"
 @click="handleleterClick"
 >{{item}}</li>
 </ul>

 methods: {
 handleleterClick (e) {
  console.log('click      ')
  this.$emit('change', e.target.innerText)
 },
 handleTouchStart (e) {
  console.log('TouchStart    ')
  e.preventDefault()//    click    
  this.touchStatus = true
 }
 }
}

e.preventDefault()이전 인쇄 결과 가 추가 되 지 않 았 습 니 다.

e.preventDefault()를 추가 한 후 결 과 를 인쇄 합 니 다.

(2)브 라 우 저가 터치 스크린 이 벤트 를 지원 하 는 지 판단
"ontouchend"in document 을 통 해 브 라 우 저가 터치 스크린 이 벤트 를 지원 하 는 지 판단 합 니 다.터치 이 벤트 를 지원 하면 클릭 이 벤트 를 지원 하지 않 습 니 다.

 <ul class="list">
 <li class="item" v-for="item of letters"
 :key="item"
 :ref="item"
 @click="handleSelfClick"
 >{{item}}</li>
 </ul>

 methods: {
 handleleterClick (e) {
  console.log('click      ')
  this.$emit('change', e.target.innerText)
 },
 handleTouchStart (e) {
  console.log('TouchStart    ')
  this.touchStatus = true
 },
 handleSelfClick (e) {
  console.log('ontouchstart' in document)//      touch  。
  if ('ontouchstart' in document) {
  this.handleTouchStart(e)
  } else {
  this.handleleterClick(e)
  }
 }
 }

이상 vue 의 touch Start 사건 과 click 사건 의 충돌 문 제 를 해결 하 는 것 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 하 실 수 있 고 많은 응원 부 탁 드 리 겠 습 니 다.