HTML5 실제 전투 및 터치 이벤트 분석(touchstart, touchmove 및 touchend)

HTML5에는 많은 새로운 이벤트가 추가되었지만 호환성 문제가 이상적이지 않고 실제 적용이 그리 강력하지 않기 때문에 여기서는 기본적으로 앞으로 좋은 응용 프로그램과 널리 호환되는 이벤트만 공유합니다. , 호환성 상황이 개선됨에 따라 앞으로 더 많은 공유가 추가될 예정입니다. 오늘 소개해드릴 이벤트는 주로 터치이벤트인 touchstart, touchmove, touchend 입니다.

초기 터치 이벤트인 touchstart, touchmove 및 touchend는 개발자에게 일부 정보를 전달하기 위해 iOS용 Safari 브라우저에 새로 추가된 이벤트입니다. iOS 장치에는 마우스나 키보드가 없기 때문에 모바일 Safari 브라우저용 대화형 웹 페이지를 개발할 때 PC 측 마우스 및 키보드 이벤트로는 충분하지 않습니다.

iPhone 3G가 출시되었을 때 자체 모바일 Safari 브라우저에서는 터치 조작과 관련된 몇 가지 새로운 이벤트를 제공했습니다. 이후 Android의 브라우저도 동일한 이벤트를 구현했습니다. 터치 이벤트(터치)는 사용자가 화면에 손가락을 대거나, 화면을 슬라이드하거나, 화면에서 멀어질 때 발생합니다. 세부 정보는 다음과 같습니다.

touchstart 이벤트: 이미 화면에 손가락이 있는 경우에도 손가락이 화면을 터치하면 트리거됩니다.
Touchmove 이벤트: 손가락이 화면을 슬라이드할 때 지속적으로 트리거됩니다. 이 이벤트 중에 PreventDefault() 이벤트를 호출하면 스크롤을 방지할 수 있습니다.
터치엔드 이벤트: 손가락이 화면에서 벗어날 때 트리거됩니다.
Touchcancel 이벤트: 시스템이 터치 추적을 중지할 때 트리거됩니다. 이번 행사의 정확한 출발 시간에 대해서는 문서에 구체적인 설명이 없기 때문에 추측만 할 수 있을 뿐입니다.

위 이벤트는 버블티가 발생하여 취소될 수 있습니다. 이러한 터치 이벤트는 DOM 사양에 정의되어 있지 않지만 DOM 호환 방식으로 구현됩니다. 따라서 각 터치 이벤트의 이벤트 객체는 마우스 연습에서 다음과 같은 공통 속성을 제공합니다. 이벤트가 발생하면 마우스 포인터의 가로 좌표), clientY(이벤트가 발생하면 마우스 포인터의 세로 좌표를 반환), screenX(이벤트가 발생하면 마우스 포인터의 가로 좌표) 및 screenY( 이벤트가 트리거될 때 반환) 이벤트가 트리거될 때 마우스 포인터의 수직 좌표). 일반적인 DOM 속성 외에도 터치 이벤트에는 터치 추적을 위한 다음 세 가지 속성도 포함되어 있습니다.

터치: 현재 추적되는 터치 작업을 나타내는 터치 개체의 배열입니다.
TargetTouches: 이벤트 대상과 관련된 Touch 개체의 배열입니다.
ChangeTouches: 마지막 터치 이후 변경된 내용을 나타내는 Touch 개체 배열입니다.

각 Touch 개체에는 다음 속성이 포함되어 있습니다.

ClientX: 뷰포트에서 터치 대상의 x 좌표입니다.
ClientY: 뷰포트에서 터치 대상의 y 좌표입니다.
식별자: 터치를 식별하는 고유 ID입니다.
PageX: 페이지에서 터치 대상의 x 좌표입니다.
pageY: 페이지에서 터치 대상의 y 좌표입니다.
ScreenX: 화면 터치 대상의 x 좌표입니다.
ScreenY: 화면 터치 대상의 y 좌표입니다.
대상: 눈에 띄는 DOM 노드 대상입니다.

이렇게 보면 위의 속성은 매우 복잡합니다. 각 속성은 실제 사례를 통해서만 자세히 설명됩니다. 작은 예는 다음과 같습니다.

JavaScript 코드

function load (){
 
    document.addEventListener('touchstart',touch,false);
    document.addEventListener('touchmove',touch,false);
    document.addEventListener('touchend',touch,false);
     
    function touch (event){
        var event = event || window.event;
         
        var oInp = document.getElementById("inp");
 
        switch(event.type){
            case "touchstart":
                oInp.innerHTML ="Touch started (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
                break;
            case "touchend":
                oInp.innerHTML ="<br>Touch end (" + event.changedTouches[0].clientX +"," + event.changedTouches[0].clientY +")";
                break;
            case "touchmove":
                event.preventDefault();
                oInp.innerHTML ="<br>Touch moved (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
                break;
        }
         
    }
}
window.addEventListener(&#39;load&#39;,load,false);

HTML 코드

<div id="inp"></div>

위의 작은 예입니다. touchstart 이벤트가 트리거되면 터치 위치가 div 태그로 업데이트됩니다. touchmove 이벤트가 트리거되면 기본 동작은 스크롤(터치 이동의 기본 동작은 페이지 스크롤)이며, 터치 작업의 변경 정보가 div 태그에 업데이트됩니다. touchend 이벤트는 터치 작업에 대한 최종 정보를 출력합니다. touchend 이벤트가 트리거되면 활성 터치 작업이 없기 때문에 터치 컬렉션에 터치 개체가 없습니다.

이러한 이벤트는 문서의 모든 요소에서 실행되므로 페이지의 여러 부분을 개별적으로 조작할 수 있습니다. 화면의 요소를 터치하면 이러한 이벤트(마우스 이벤트 포함)가 다음 순서로 발생합니다.

(1)touchstart
(2)mouseover
(3)mousemove(한 번)
( 4)mousedown
(5)mouseup
(6)click
(7)touchend

이렇게 많이 소개했는데, 터치 이벤트(touchstart) 지원은 어떤가요? ), touchmove 및 touchend) 브라우저에는 iOS용 Safari, Android용 WebKit, bada용 Dolfin, OS6+의 BlackBerry WebKit, Opera Mobile 10.1+ 및 LG 독점 OS의 Phantom 브라우저가 포함됩니다. 현재 iOS 버전의 Safari에서만 멀티 터치를 지원합니다. Firefox 6+ 및 PC용 Chrome도 터치 이벤트를 지원합니다.

HTML5의 실제 전투와 터치 이벤트(touchstart, touchmove, touchend) 분석을 소개합니다. 오늘은 브라우저 호환성과 지원이 좋은 몇 가지 터치 이벤트를 주로 소개합니다. 참고가 되기를 바라며, PHP 중국어 홈페이지를 지원해 주시길 바랍니다.

HTML5 실제 전투와 터치 이벤트 분석(touchstart, touchmove, touchend)에 대한 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!