터치스크린의 JavaScript 이벤트 분석_javascript 기술

이 기사의 예에서는 터치 스크린의 JavaScript 이벤트를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

1. 터치 이벤트

온터치스타트
온터치무브
온터치엔드
ontouchcancel 현재 모든 모바일 브라우저는 IE를 포함하여 이 네 가지 터치 이벤트를 지원합니다. 터치 스크린은 MouseEvent도 지원하므로 순서에 유의해야 합니다: touchstart → mouseover → mousemove → mousedown → mouseup → click1

예는 다음과 같습니다.

/**
* onTouchEvent
*/
var div = document.getElementById("div");
//touchstart类似mousedown
div.ontouchstart = function(e){
//事件的touches属性是一个数组，其中一个元素代表同一时刻的一个触控点，
//从而可以通过touches获取多点触控的每个触控点
//由于我们只有一点触控，所以直接指向[0]
var touch = e.touches[0];
//获取当前触控点的坐标，等同于MouseEvent事件的clientX/clientY
var x = touch.clientX;
var y = touch.clientY;
};
//touchmove类似mousemove
div.ontouchmove = function(e){
//可为touchstart、touchmove事件加上preventDefault从而阻止触摸时，
//浏览器的缩放、滚动条滚动等
e.preventDefault();
};
//touchend类似mouseup
div.ontouchup = function(e){
//nothing to do
};

2. 제스처 이벤트 제스처는 멀티 터치를 사용하여 사진 및 웹 페이지의 확대 및 회전과 같은 회전 및 늘이기 등의 작업을 수행하는 것을 말합니다. 제스처 이벤트는 두 개 이상의 손가락이 동시에 터치되는 경우에만 트리거됩니다. 크기 조정에 대해 주의해야 할 사항 중 하나는 요소의 위치 좌표입니다. 일반적으로 요소의 위치 좌표를 얻기 위해 offsetX, getBoundingClientRect 및 기타 메서드를 사용합니다. 그러나 모바일 브라우저에서는 사용 중에 페이지 크기가 조정되는 경우가 많습니다. 스케일링된 요소 좌표가 변경됩니다. 대답은 다양하다는 것입니다. 이 문제를 설명하기 위해 시나리오를 사용해 보겠습니다. 페이지 A가 로드된 후 JavaScript는 문서의 요소 좌표를 (100,100)로 얻은 다음 사용자가 페이지를 확대하여 출력합니다. 요소의 좌표는 여전히 (100,100)입니다. 그러나 화면에서 요소의 반응 영역은 크기 조정에 따라 오프셋됩니다. Brick Breaker 게임의 데모를 열고 페이지가 완전히 로드될 때까지 기다린 다음 확대할 수 있습니다. 이때 손가락이 "여기 터치" 영역 외부에 닿더라도 여전히 제어할 수 있습니다. 볼보드는 영역이 오프셋되어 있기 때문입니다. 페이지를 새로 고치거나 크기 조정을 재개하지 않으면 오프셋이 유지됩니다.

/**
* onGestureEvent
*/
var div = document.getElementById("div");
div.ongesturechange = function(e){
//scale代表手势产生的缩放比例，小于1是缩小，大于1是放大，原始为1
var scale = e.scale;
//rotation代表旋转手势的角度，值区间[0,360]，正值顺时针旋转，负值逆时针
var angle = e.rotation;
};

3. 중력 감지 중력 감지는 신체 노드에 onorientationchange 이벤트만 추가하면 됩니다. 이 이벤트에서는 현재 휴대폰 방향을 나타내는 값을 window.orientation 속성에서 가져옵니다. window.orientation의 값 목록은 다음과 같습니다.

0: 페이지가 처음 로드되었을 때와 동일한 방향
-90: 원래 방향을 기준으로 시계 방향으로 90° 회전
180: 180° 회전
90: 시계 반대 방향으로 90° 회전했습니다. 테스트에 따르면 Android 2.1은 아직 중력 감지를 지원하지 않습니다. 위의 이벤트는 현재의 터치스크린 이벤트입니다. 이러한 이벤트는 아직 표준에 포함되지 않았지만 이미 널리 사용되고 있습니다. Android 2.1을 사용하고 있으며 다른 환경에서는 테스트해 본 적이 없습니다.

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.