모바일 WEB 개발 시 클릭, 터치, 탭 이벤트 활용에 대한 자세한 설명

이번에는 모바일 WEB 개발에서 클릭, 터치, 탭 이벤트 사용에 대해 자세히 설명하겠습니다. .실제 사례를 살펴보겠습니다. 1. 클릭과 탭의 비교

둘 다 클릭하면 발동되지만, 모바일 WEB 쪽에서는 클릭에

200~300ms가 걸리므로 클릭 이벤트로 클릭 대신 탭을 사용해 주세요.

singleTap 및 doubleTap 각각 단일 클릭과 더블 클릭을 나타냅니다.

2. 탭스루 처리 관련

클릭 이벤트의 지연된 응답을 피하기 위해 zepto 프레임워크의 탭을 사용하여 장치 브라우저에서 클릭 이벤트를 이동할 때 탭스루가 발생할 수 있습니다. 즉, 클릭하면 현재 레이어가 아닌 레이어에서 클릭 이벤트가 트리거됩니다.

처리 방법:

(1),

github에는 fastclick이라는 라이브러리가 있는데, 이 라이브러리는 모바일 기기에서 클릭 이벤트의 지연된 응답을 피할 수도 있습니다. https://github.com/ftlabs/fastclick
스크립트 태그(이 라이브러리는 AMD를 지원하므로 AMD 사양을 따르고 require.js와 같은 모듈 로더로 도입할 수도 있습니다.), DOM이 준비되면 본문에서 다음과 같이 초기화할 수 있습니다.

$(function(){
    newFastClick(document.body);
})

그런 다음 "지연 클릭 없음"이 필요한 요소를 클릭 이벤트에 바인딩할 수 있습니다(더 이상 zepto의 탭 이벤트에 바인딩되지 않음).
물론 본문이 아닌 특정 DOM에서 초기화할 수도 있습니다. 이런 방식으로 이 DOM과 해당 하위 요소만 "지연 없는" 클릭을 즐길 수 있습니다.

실제 개발에서 우리는 발견했습니다. 요소가 바인딩되면 fastclick을 설정한 후 클릭 응답 속도가 탭보다 약간 빠릅니다. 하하

(2), touchend 이벤트를 요소에 바인딩하고 e.preventDefault();

$demo.on('touchend',function(e){//改变了事件名称，tap是在body上才被触发，而touchend是原生的事件，在dom本身上就会被捕获触发
    $demo.hide()
    e.preventDefault();//阻止“默认行为”
})

<code style="font-size:1em !important;line-height:1.1em !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;color:#000000 !important;display:inline !important;margin:0px !important;padding:0px !important;border:0px !important;vertical-align:baseline !important;float:none !important;overflow:visible !important;"><span style='font-family: 微软雅黑, "Microsoft YaHei"; font-size: 14px;'></span>

🎜

3. 터치 이벤트 터치는 터치스크린 휴대폰의 터치 이벤트입니다. 현재 대부분의 터치스크린 휴대전화 웹킷 커널은 터치 이벤트 모니터링을 제공하므로 개발자는 사용자가 화면을 터치할 때 일부 정보를 얻을 수 있습니다.

포함: touchstart, touchmove, touchend, touchcancel 이 네 가지 이벤트

touchstart, touchmove, touchend 이벤트는 mousedown, mouseover
및 mouseup의 트리거와 유사할 수 있습니다.

touchstart: 손가락이 화면을 터치할 때 실행됩니다.

touchmove: 손가락이 화면에서 움직일 때 실행됩니다.

touchend: 손가락이 화면을 떠날 때 실행됩니다.

실제로 손가락이 화면을 떠나지 않은 경우 경고 및 확인 팝업 상자나 android와 같은 시스템 수준 작업이 발생할 때 touchcancel이 트리거됩니다. 시스템 기능 팝업 창.

이 4가지 이벤트의 시작 순서는 다음과 같습니다.

touchstart -> 터치무브
-> ...... ->터치무브

그러나 위의 단일 이벤트를 모니터링하는 것만으로는 더블 클릭, 길게 누르기, 왼쪽 및 오른쪽 스와이프, 확대/축소 및 기타 터치스크린 휴대폰에서 흔히 발생하는 일부 제스처 작업에 대한 모니터링을 완료하기에는 충분하지 않습니다. 제스처 작업. 이러한 유형의 제스처 동작을 캡슐화하려면 이러한 이벤트에 대한 모니터링을 결합해야 합니다.

사실, jqmobile, zepto 및 jqtouch와 같은 모바일 브라우저에 대한 많은 프레임워크가 이러한 제스처를 캡슐화했습니다. 그러나 일부 Android 시스템에서는 비극이 발생했습니다(Android 4.0.x에서 직접 테스트했습니다). touchmove 및 touchend 이벤트는 제대로 트리거될 수 없습니다. 다음은 예입니다.

예를 들어 손가락으로 화면의 위에서 아래로 페이지를 드래그하면 이론적으로 터치스타트가 트리거됩니다. , 여러 번 touchmove
및 최종 touchend를 수행하지만 Android 4.0에서는 touchmove가 한 번만 실행되고 실행 시간은 touchstart
와 거의 동일하며 touchend가 직접 실행되지 않습니다. 이것은 매우 심각한 버그입니다. 많은 사람들이 Google Issue http://code.google.com/p/android/issues/detail?id=19827

당분간은 다음에서만 발견했습니다. android 4.0 이런 버그가 있는데, iOS 3.x 버전에도 나올 것이라고 합니다.

분명히 jqmobile, zepto 등은 이 버그가 모니터링 구현에 미치는 심각한 영향을 인식하지 못하므로 이러한 프레임워크의 이벤트를 직접 사용할 경우 호환성 문제가 다소 발생할 것입니다!

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

일반적으로 사용되는 코드 구성 요약

JS를 사용하여 함수 매개변수 이름을 얻는 방법

위 내용은 모바일 WEB 개발 시 클릭, 터치, 탭 이벤트 활용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!