이 기사에서는 터치 스크린의 JavaScript 이벤트에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
1. 이벤트를 터치합니다
OntouchStart
ontouchmove
Ontouchend
Ontouchcancel은 현재 IE를 포함 하여이 4 개의 터치 이벤트를 지원합니다. 터치 스크린도 Mouseevent를 지원하기 때문에 순서가 언급되어 있어야합니다. TouchStart → MouseOver → MouseMove → MouseDown → MouseUp → Click1
예는 다음과 같습니다.
/*** ontouchevent*/var div = div. getElementById ( "div"); // t E.Touches [0]; // ClientX/ClientYvar x = Touch.ClientX와 동등한 현재 터치 포인트의 좌표를 가져옵니다. var y = touch.clienty;}; // t 스크롤 등 E.PreventDefault ();}; // t
2. 제스처 이벤트 제스처는 사진 및 웹 페이지 확대 및 회전과 같은 회전, 스트레치 및 기타 작업을 위해 멀티 터치를 사용하는 것을 말합니다. 제스처 이벤트는 동시에 두 개 이상의 손가락을 만질 때 발생합니다. 스케일링에 대해주의를 기울여야 할 한 가지는 요소의 위치 좌표입니다. 우리는 일반적으로 Offsetx, getBoundingClientRect 및 기타 방법을 사용하여 요소의 위치 좌표를 얻지 만 모바일 브라우저에서는 종종 사용 중에도 스케일링 된 요소 변경의 좌표가 표시됩니까? 대답은 차이가 있다는 것입니다. 시나리오를 사용 하여이 문제를 설명하십시오. 페이지 A가로드 된 후 JavaScript는 문서의 요소 좌표를 (100,100)으로 가져온 다음 사용자가 페이지를 확대합니다. 현재 JavaScript는 요소 좌표를 다시 출력하고 여전히 (100,100), 화면의 요소의 응답 영역은 스케일링 비율에 따라 오프셋됩니다. 브릭 플레이 게임 데모를 열고 페이지가 완전히로드 된 후 확대 할 수 있습니다. 이 시점에서는 손가락이 "터치"영역 밖에서 손가락이 터치더라도 영역이 오프셋되어 있으므로 볼 플레이트를 제어 할 수 있음을 알 수 있습니다. 페이지가 새로 고침되거나 줌이 복원되지 않는 한 오프셋은 항상 존재합니다.
/*** ongestureEvent*/var div = document.getElementById ( "div"); div.ongestureChange = function (e) {// 스케일은 제스처에 의해 생성 된 스케일링 스케일을 나타냅니다. 1 미만이 줄어들고 1보다 큰 확대입니다. 원래 1var scale = e.scale; // 회전은 회전 제스처의 각도, 값 간격 [0,360]을 나타냅니다. 양수 값은 시계 방향으로 회전하고, 음의 값 반대 방향 var var var var var var var var var var;};3. 중력 감지 중력 감지가 더 간단하므로 본체 노드에 온도적 체인트 이벤트 만 추가하면됩니다. 이 경우 현재 전화 방향을 나타내는 값은 창에서 얻어집니다. Window.orientation의 값 목록은 다음과 같습니다.
0 : 페이지가 처음로드 된 방향과 일치
-90 : 원래 방향에 비해 시계 방향으로 90 ° 회전
180 : 180 °가되었습니다
90 : 시계 반대 방향으로 90 ° 돌 렸습니다. 내 테스트에 따르면 Android 2.1은 아직 중력 감지를 지원하지 않습니다. 위는 현재 터치 스크린 이벤트입니다. 이러한 이벤트는 표준에 통합되지 않았지만 널리 사용되었습니다. 다른 환경에서는 테스트되지 않은 Android 2.1이 있습니다.
추신 : 여기서는 JS 이벤트에 대한 온라인 도구를 제공합니다.이 행사는 일반적으로 사용되는 이벤트 유형과 JS의 기능 기능을 요약합니다.
JavaScript 이벤트 및 기능의 전체 목록 :
http://tools.vevb.com/table/javaScript_event
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.