html5_html5 튜토리얼 기술을 사용하여 터치스크린 웹사이트 구축 시 터치 이벤트 소개

머리말
터치스크린 웹사이트와 기존 PC 웹사이트의 차이점은 무엇인가요? 예를 들어, 일반적으로 사용되는 클릭 이벤트는 터치 스크린 장치에서는 무력합니다.
휴대전화에서 대부분의 상호작용은 터치를 통해 이루어지므로 터치스크린 인터랙티브 웹사이트의 경우 터치 이벤트가 매우 중요합니다.
애플은 iOS 2.0에서 터치 이벤트 API를 도입했고, 안드로이드는 이 사실상의 표준을 따라잡으며 격차를 줄여나가고 있습니다. 최근 W3C 작업 그룹이 이 터치 이벤트 사양을 개발하기 위해 협력하고 있습니다.

사양
여기에서는 몇 가지 인기 있는 터치 이벤트를 소개합니다. 이 이벤트는 대부분의 최신 브라우저에서 테스트할 수 있습니다(터치 스크린 장치여야 함).
touchstart: 트리거되는 경우 터치가 시작됩니다
touchmove: 화면에서 손가락이 미끄러질 때 트리거됩니다
touchend: 터치가 끝날 때 트리거됩니다
각 터치 이벤트에는 3개의 터치가 포함됩니다. 목록, 각 목록에는 해당하는 일련의 터치 포인트가 포함됩니다(다음에 사용됨). 멀티 터치 구현):
터치: 현재 화면에 있는 모든 손가락의 목록입니다.
targetTouches: 현재 DOM 요소에 위치한 손가락 목록입니다.
changedTouches: 현재 이벤트에 관련된 손가락 목록입니다.
각 터치 포인트에는 다음과 같은 터치 정보(일반적으로 사용됨)가 포함됩니다.
식별자: 터치 세션에서 현재 손가락을 고유하게 식별하는 숫자 값입니다. 일반적으로 0부터 시작하는 일련번호(android4.1, uc)
target: 액션의 타겟인 DOM 요소입니다.
pageX/pageX/clientX/clientY/screenX/screenY: 값, 작업이 발생하는 화면의 위치(페이지에는 스크롤 거리가 포함되고 클라이언트에는 스크롤 거리가 포함되지 않으며 화면은 화면을 기반으로 함) .
radiusX/radiusY/rotationAngle: 타원의 두 반경과 회전 각도를 각각 사용하여 대략 손가락 모양과 동일한 타원을 그립니다. 예비 테스트 브라우저에서는 이 기능을 지원하지 않습니다. 다행히 일반적으로 사용되는 기능은 아닙니다.
이 정보를 통해 이러한 이벤트 정보를 바탕으로 사용자에게 다양한 피드백을 제공할 수 있습니다.

아래에서는 touchmove를 사용하여 한 손가락으로 드래그하는 작은 데모를 보여 드리겠습니다. :

코드 복사

코드는 다음과 같습니다.

/*한 손가락으로 드래그*/
var obj = document.getElementById('id')
obj .addEventListener('touchmove', function(event) {
// 이 요소의 위치에 손가락이 하나만 있는 경우
if (event.targetTouches.length == 1) {
　 이벤트. PreventDefault() ;// 브라우저 기본 이벤트 방지, 중요
var touch = event.targetTouches[0]
// 손가락이 있는 위치에 요소 배치
obj.style.left = touch.pageX- 50 'px';
obj.style.top = touch.pageY-50 'px';
}
}, false)

터치 스크린 장치의 의사 클래스에 대한 네 가지 팁 :
우리 모두는 a 태그, 링크, 방문, 활성 및 호버의 네 가지 의사 클래스가 클릭 이벤트를 위해 특별히 설계되었다는 것을 알고 있습니다. 터치스크린 웹사이트에서는 사용하지 마세요. 테스트 후에는 대부분 사용할 수 없습니다. 하지만 여기에 마우스 오버에 대한 약간의 트릭이 있습니다. 버튼을 클릭한 후에는 버튼이 항상 마우스 오버 상태로 유지됩니다. 이때 이 가상 클래스를 기반으로 설정한 CSS는 손가락으로 다른 클래스를 클릭할 때까지 작동합니다. . 하나의 버튼을 사용하면 호버 상태가 다른 버튼으로 전환됩니다. 이것을 사용하면 몇 가지 작은 효과를 만들 수 있습니다. 이 트릭은 대부분의 브라우저에서 여전히 작동합니다.

이상은 가득, 현실은 빈약!
w3c는 멀티 터치를 지원하지만 불행히도 멀티 터치 기능을 지원하는 브라우저는 거의 없습니다. 특히 Android 플랫폼의 브라우저는 위에서 소개한 손가락 목록을 빈 대화로 만들고 두 개의 터치 포인트를 캡처하면 터치 실패로 직접 이어집니다! 다행스럽게도 iOS 기기와 함께 제공되는 Safari 브라우저는 이 기능을 지원할 수 있어 미래에 대한 희망이 가득합니다. 결국 우리는 마우스의 한 번의 클릭 조작에 너무 오랫동안 갇혀 있었습니다. 여러 손가락으로 웹사이트를 운영한다는 것은 얼마나 흥미로운 일입니까!