의견 : 휴대 전화의 대부분의 상호 작용은 터치를 통해 달성되므로 터치 스크린 대화식 웹 사이트의 경우 터치 이벤트가 매우 중요합니다. 여기서 우리는 더 인기있는 몇 가지 터치 이벤트를 소개합니다. 대부분의 최신 브라우저 에서이 이벤트를 테스트 할 수 있습니다. 관심있는 친구들은 그것에 대해 배울 수 있습니다.
머리말터치 스크린 웹 사이트와 기존 PC 웹 사이트의 차이점은 무엇입니까? 상호 작용 방법의 변화가 가장 먼저 영향을받습니다. 예를 들어, 우리가 자주 사용하는 클릭 이벤트는 터치 스크린 장치에서 무력이 없습니다.
휴대폰의 대부분의 상호 작용은 터치를 통해 달성되므로 터치 스크린이있는 대화식 웹 사이트에는 터치 이벤트가 매우 중요합니다.
Apple은 iOS 2.0에서 T 최근 W3C 실무 그룹 이이 터치 이벤트 표준을 공식화하기 위해 협력하고 있습니다.
사양
여기서 우리는 더 인기있는 몇 가지 터치 이벤트를 소개합니다. 대부분의 최신 브라우저 에서이 이벤트를 테스트 할 수 있습니다 (터치 스크린 장치 여야 함) :
터치 스타트 : 터치가 시작될 때 트리거되었습니다
TouchMove : 손가락이 화면에 미끄러질 때 트리거되었습니다
터치 엔드 : 터치가 끝나면 트리거되었습니다
각 터치 이벤트에는 3 개의 터치 목록이 포함되어 있으며 각 목록에는 해당 일련의 터치 포인트 (멀티 터치 구현에 사용)가 포함되어 있습니다.
터치 : 현재 화면에있는 모든 손가락 목록.
TargetTouches : 현재 DOM 요소에있는 손가락 목록.
ChangeTouches : 현재 이벤트와 관련된 손가락 목록.
각 터치 포인트에는 다음 터치 정보가 포함되어 있습니다 (일반적으로 사용)에는 다음과 같습니다.
식별자 : 터치 세션에서 현재 손가락을 고유하게 식별하는 값. 일반적으로 0부터 시작하는 흐름 번호 (Android4.1, UC)
TARGET : DOM 요소는 동작의 대상 대상입니다.
pagex/pagex/clientx/clienty/screenx/screeny : 값, 동작이 화면에서 발생하는 값 (페이지에는 스크롤 거리가 포함되어 있고 클라이언트에는 스크롤 거리가 포함되어 있지 않으며 화면은 화면을 기반으로합니다).
RADIUSX/RADIUSY/ROTATIONANGE : 타원의 모양에 따라 타원을 각각 그립니다. 예비 테스트 브라우저는이를 지원하지 않지만 다행히도 기능은 일반적으로 사용되지 않으므로 모든 사람이 피드백에 오신 것을 환영합니다.
이 정보를 사용하면 이러한 이벤트 정보를 기반으로 다른 피드백을 사용자에게 제공 할 수 있습니다.
아래에서는 터치 모브를 사용하여 작은 데모 싱글 핑거 드래그를 보여 드리겠습니다.
/*한 손가락으로 드래그*/
var obj = document.getElementById ( 'id');
obj.addeventListener ( 'touchmove', function (event) {
//이 요소 위치에 손가락이 하나만있는 경우
if (event.targetTouches.length == 1) {
event.preventDefault (); // 브라우저 기본 이벤트를 차단합니다
var touch = event.targetTouches [0];
// 손가락이있는 곳에 요소를 넣습니다
obj.style.left = touch.pagex-50 + 'px';
obj.style.top = touch.pagey-50 + 'px';
}
}, 거짓);
터치 스크린 장치에서 태그의 4 가지 의사 클래스에 대한 팁 :
우리는 모두 A 태그 링크의 4 가지 의사 클래스, 방문, 활성 및 호버가 클릭 이벤트를 위해 설계되었으므로 터치 스크린 웹 사이트에서 사용하지 마십시오. 대부분의 테스트도 사용할 수 없습니다. 그러나 여기 호버에 대한 약간의 속임수가 있습니다. 버튼을 클릭하면 버튼이 호버 상태에 남아 있습니다. 현재이 의사 클래스를 기반으로 설정 한 CSS는 손가락으로 다른 버튼을 클릭 할 때까지 작동하며 호버 상태가 다른 버튼으로 전송됩니다. 이것을 사용하면 약간의 효과가있을 수 있습니다. 이 트릭은 여전히 대부분의 브라우저에서 사용할 수 있습니다.
이상은 가득 차고 현실은 마른 사람입니다!
W3C는 멀티 터치에 대비할 준비가되었지만 불행히도, 안드로이드 플랫폼의 멀티 터치 기능, 특히 브라우저를 지원하는 브라우저는 거의 없으므로 위에 소개 된 손가락 목록이 빈 대화가됩니다. 두 개의 터치 포인트를 캡처하면 터치 고장이 직접 이어집니다! 다행스럽게도 iOS 장치와 함께 제공되는 Safari 브라우저는이 기능을 지원할 수있어 미래에 대한 희망으로 가득 차 있습니다. 결국, 우리는 마우스의 단일 포인트 작동에 너무 오랫동안 투옥되었습니다. 웹 사이트를 더 사용하는 것이 얼마나 흥미 진진한가!