jquery mobile의 터치 클릭 이벤트가 여러 번 발생하는 문제에 대한 해결 방법

jquery mobile의 터치 클릭 이벤트가 여러 번 발생하는 문제에 대한 해결 방법_jquery

WBOY

풀어 주다： 2016-05-16 16:49:26

원래의

1612명이 탐색했습니다.

jquery mobile은 제스처 터치에 대해 다음과 같은 이벤트 모니터링을 제공합니다.

코드 복사 코드는 다음과 같습니다.

tap 사용자가 화면을 탭할 때 트리거됨
taphold 사용자가 화면을 탭하고 1초 이상 계속 터치할 때 트리거됨
swipe 페이지를 세로 또는 가로로 드래그할 때 트리거됨. 이 이벤트에는 scrollSupressionThreshold, DurationThreshold, horizonDistanceThreshold 및 VerticalDistanceThreshold
swipeleft 페이지를 왼쪽 방향으로 드래그할 때 트리거됩니다
swiperright 페이지를 오른쪽 방향으로 드래그할 때 트리거됩니다
 

그런데 Windows 8 터치 기기와 Android 기기에서 탭 이벤트를 테스트한 결과, 한 번의 클릭으로 여러 번 탭 이벤트가 발생했습니다.
테스트 후 탭 메서드의 응답 시간이 onclick 이벤트보다 훨씬 빠르므로 클릭 이벤트를 사용하여 탭 이벤트의 응답을 처리할 수 있습니다. 샘플코드 참고사항은 다음과 같습니다.

그러나 Windows 8 터치 기기 및 Android 기기에서 탭 이벤트를 테스트한 결과 한 번의 클릭으로 여러 번 트리거되었습니다.
테스트 후 탭 메서드의 응답 시간이 onclick 이벤트보다 훨씬 빠르므로 클릭 이벤트를 사용하여 탭 이벤트의 응답을 처리할 수 있습니다. 샘플코드 참고사항은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

jquery 모바일의 탭 이벤트가 여러 번 트리거됩니다. - Zhiwen Studio

Zhiwen Studio

메뉴

　

;ol data-role="listview" data-inset="true">

< ;/div>
<script> //화면 탭하기 //$('div#article').on("tap",function(event){ $(' div#article' ).on("click",function(event){ event.stopPropagation(); console.log(111111); if(event.clientY < 80){ // 페이지 상단을 클릭한 후 위로 슬라이드하세요 if(document.body.scrollTop<1) return; var scrollPosY = document.body.scrollTop - document.body.clientHeight 100; $. mobile.silentScroll(scrollPosY); }else if(event.clientY > document.body.clientHeight - 80){ var scrollPosY = document.body.scrollTop document.body.clientHeight - 100 ; if(scrollPosY < document.body.scrollHeight){//상단 커버의 보이는 높이 <웹페이지 본문의 높이, 그런 다음 한 화면 스크롤 $.mobile.silentScroll(scrollPosY); } } }); for(var i=1;i<200;i ){ $('#article ol').append('<li>th ' i ' 라인: Zhiwen Studio</li>'); } </script>

또 다른 대체 방법:
Android 기기에서 JQueryMobile의 탭 이벤트는 여러 번 실행됩니다. 우리의 솔루션은 Google FastButton을 사용하고 fastbutton을 사용하여 원래 탭이 필요한 위치를 처리하는 것입니다.

또 다른 대체 방법 참조:
Android 기기에서 JQueryMobile의 탭 이벤트는 여러 번 실행되는 문제가 있습니다. 우리의 해결책은 Google FastButton을 사용하고 탭이 원래 필요한 곳에는 빠른 버튼을 사용하는 것입니다.