이 기사는 주로 HTML5 모바일 터미널에서 개발 한 일반적인 터치 이벤트의 편집을 소개합니다. 터치 이벤트의 이벤트 객체는 기본적으로 마우스 작동의 속성에 해당합니다. 필요한 친구는 그것을 참조 할 수 있습니다.
많은 새로운 이벤트가 HTML5에 추가되었지만 호환성 문제가 이상적이지 않고 응용 프로그램이 실용적이지 않기 때문에 기본적으로 여기에서 생략됩니다. 우리는 광범위한 응용 프로그램과 호환성이 우수한 이벤트 만 공유합니다. 호환성 상황이 향후 향상되면서 우리는 그들을 추가하고 공유 할 것입니다. 오늘 제가 소개 할 이벤트는 주로 터치 스타트, 터치 모브 및 터치 엔드입니다.
처음에는 T iOS 장치에는 마우스 나 키보드가 없기 때문에 모바일 사파리 브라우저를위한 대화식 웹 페이지를 개발할 때 PC의 마우스 및 키보드 이벤트로는 충분하지 않습니다.
iPhone 3GS가 출시되면 자체 모바일 사파리 브라우저는 터치 작업과 관련된 새로운 이벤트를 제공했습니다. 그런 다음 Android의 브라우저에서 동일한 이벤트를 구현했습니다. 사용자가 화면에 손가락을 넣거나 화면에서 미끄러질 때 또는 화면에서 멀어 질 때 터치 이벤트가 시작됩니다. 다음 세부 사항에 대해 설명합니다.
터치 스타트 이벤트 : 손가락이 화면에 닿을 때 트리거되면 한 손가락이 이미 화면에 놓여 있어도 트리거됩니다.
TouchMove 이벤트 : 손가락이 화면에 미끄러질 때 지속적으로 트리거됩니다. 이 이벤트 중에는 extendefault () 이벤트를 호출하면 스크롤을 방지 할 수 있습니다.
터치 엔드 이벤트 : 손가락이 화면을 떠날 때 트리거되었습니다.
TouchCancel 이벤트 : 시스템이 터치 추적을 중지 할 때 트리거되었습니다. 이 문서는이 이벤트의 정확한 출발 시간을 지정하지 않으므로 추측 할 수 있습니다.
위의 모든 이벤트는 버블 링되며 취소 될 수 있습니다. 이러한 터치 이벤트는 DOM 사양에서 정의되지 않지만 DOM 호환 방식으로 구현됩니다. 따라서 각 터치 이벤트 객체는 마우스 연습에서 일반적인 속성을 제공합니다. 거품 (버블 이벤트 유형), 취소 가능 (예방 조정 () 메소드와 관련하여 이벤트가 취소 될 수 있는지), clientx (이벤트가 트리거 될 때 마우스 포인터의 수직 좌표를 반환 할 때 마우스 포인터의 수평 좌표를 반환), 클라이언트 (이벤트가 트리거 될 때) 이벤트가 트리거 될 때 마우스 포인터의 좌표) 및 Screeny (이벤트가 트리거 될 때 마우스 포인터의 수직 좌표를 반환). 일반적인 DOM 특성 외에도 터치 이벤트에는 터치 추적을위한 다음 세 가지 속성도 포함되어 있습니다.
터치 : 현재 추적 된 터치 작업을 나타내는 터치 객체 배열.
TargetTouches : 이벤트 대상에 특정한 터치 객체 배열.
Changetouches : 마지막 터치 이후 변경된 것을 나타내는 터치 객체의 배열.
각 터치 객체에는 다음 속성이 포함되어 있습니다.
ClientX : 뷰포트에서 대상의 X 좌표를 터치하십시오.
클라이언트 : 뷰포트에서 대상의 Y 좌표를 터치합니다.
식별자 : 터치를 식별하는 고유 ID.
Pagex : 페이지에서 대상의 x 좌표를 터치합니다.
Pagey : 페이지에서 대상의 y 좌표를 터치합니다.
Screenx : 화면에서 대상의 X- 코디네이트를 터치합니다.
Screeny : 화면에서 대상의 y 좌표를 터치합니다.
대상 : DOM 노드의 대상을 터치합니다.
각 터치 포인트에는 다음 터치 정보가 포함되어 있습니다 (일반적으로 사용)에는 다음과 같습니다.
식별자 : 터치 세션에서 현재 손가락을 고유하게 식별하는 값. 일반적으로 0부터 시작하는 흐름 번호 (Android4.1, UC)
TARGET : DOM 요소는 동작의 대상 대상입니다.
pagex/pagex/clientx/clienty/screenx/screeny : 값, 동작이 화면에서 발생하는 값 (페이지에는 스크롤 거리가 포함되어 있고 클라이언트에는 스크롤 거리가 포함되어 있지 않으며 화면은 화면을 기반으로합니다).
RADIUSX/RADIUSY/ROTATIONANGE : 타원의 모양에 따라 타원을 각각 그립니다. 예비 테스트 브라우저는이를 지원하지 않지만 다행히도 기능은 일반적으로 사용되지 않으므로 모든 사람이 피드백에 오신 것을 환영합니다.
JavaScript 작업의 작은 예 :
JavaScript 코드는 컨텐츠를 클립 보드에 복사합니다