모바일 터치 스크린 슬라이딩 이벤트, 슬라이딩 터치 스크린 이벤트 모니터링!
1, 터치 이벤트
ontouchstart, ontouchmove, ontouchend, ontouchcancel
현재 모바일 측 브라우저에서는 다음과 같은 4 가지 터치 이벤트를 지원합니다 터치스크린도 MouseEvent 를 지원하기 때문에 이들의 순서는 touchstart → mouse over → mousemove → mousedown → mouseup → click1
apple 이 id 에 있다는 점에 유의해야 한다 최근 W3C 워크그룹은 이 터치 이벤트 사양을 개발하기 위해 함께 노력하고 있습니다. < P > 2, 사양 < P > 여기서는 좀 더 널리 보급된 터치 이벤트를 소개합니다. 대부분의 현대 브라우저에서 이 이벤트를 테스트할 수 있습니다 (터치스크린 장치여야 함):
터치 시작 시 트리거
터치 이동: 손가락이 화면 위로 미끄러질 때 트리거
터치 종료 시 트리거 < 각 목록에는 해당 터치 포인트 범위 (멀티 터치용):
touches: 현재 화면에 있는 모든 손가락 목록이 포함되어 있습니다.
targetTouches: 현재 DOM 요소에 있는 손가락 리스트입니다.
changedTouches: 현재 이벤트 손가락 목록을 포함합니다.
각 터치 포인트는
identifier: 터치 세션 (touch session) 에서 현재 손가락을 고유하게 식별하는 숫자 값입니다. 일반적으로 부터 시작하는 유수 번호 (android4.1, UC)
target: DOM 요소가 작업의 대상입니다.
pagex/pagex/clientx/clienty/screenx/screeny: 화면에서 동작이 발생하는 숫자 값입니다 (page 에는 스크롤 거리가 있고 client 에는 스크롤 거리가 없습니다, screenx
radiusx/radiusy/rotationangle: 손가락 모양과 대략 비슷한 타원을 그립니다 (각각 타원의 두 반지름과 회전 각도). 예비 테스트 브라우저는 지원되지 않지만 기능이 자주 사용되지 않습니다. 피드백을 환영합니다.
이 정보를 통해 이벤트 정보에 따라 사용자에게 다양한 피드백을 제공할 수 있습니다. < P > 다음으로, touchmove 로 구현된 단일 손가락 끌기: < P > 3, 제스처 이벤트 < P > 제스처는 그림, 웹 페이지 확대, 회전과 같은 멀티 터치로 회전, 늘이기 등의 작업을 수행하는 작은 demo 를 보여 드리겠습니다. 두 개 이상의 손가락을 동시에 만져야 제스처 이벤트가 트리거됩니다. 확대/축소에 대해 주의해야 할 점은 요소의 위치 좌표입니다. 우리는 보통 offsetX, getBoundingClientRect 등의 방법을 사용하여 요소의 위치 좌표를 얻습니다. 그러나 휴대폰 브라우저에서 페이지가 자주 사용 중에 확대/축소되는데, 확대 후 요소 좌표가 변경됩니까? 답은 차이가 있다는 것이다. 한 시나리오를 사용하여 이 문제를 설명합니다. 페이지 A 로드가 완료되면 자바스크립트는 문서 (1,1) 에서 해당 요소의 좌표를 얻습니다. 그런 다음 사용자가 페이지를 확대하면 자바스크립트로 요소 좌표를 다시 출력합니다. 여전히 (1,1) 벽돌 게임 demo 를 열고 페이지가 완전히 로드되면 확대할 수 있습니다. 이때 손가락이 "touch here" 영역 외부에 닿아도 볼 보드로 제어할 수 있다는 것을 알 수 있습니다. 영역이 오프셋되었기 때문입니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), Northern Exposure (미국 TV 드라마) 페이지가 새로 고쳐지거나 확대/축소가 재개되지 않는 한 오프셋은 그대로 유지됩니다.
4, 중력 감지
중력 감지는 간단합니다. body 노드에 onorientationchange 이벤트를 추가하기만 하면 됩니다. 이 경우 현재 휴대폰 방향을 나타내는 숫자 값은 window.orientation 속성에 의해 얻어집니다. Window.orientation 의 값 목록은 다음과 같습니다.
: 페이지가 처음 로드될 때의 방향과 일치
-9: 원래 방향을 기준으로 시계 방향으로 9 도 회전
18: 18 도 회전
9 이상은 현재 터치 스크린 이벤트이며, 이러한 이벤트는 아직 표준에 포함되지 않았지만 널리 사용되고 있습니다. 본인의 안드로이드 2.1 은 다른 환경에서 테스트되지 않았습니다.