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 호환 방식으로 구현됩니다. 따라서 각 터치 이벤트의 이벤트 객체는 마우스 연습에서 공통 속성을 제공합니다: bubble(버블 이벤트 유형), cancelable(preventDefault() 메소드 사용 여부) 기본값 취소 action 관련 이벤트), clientX(이벤트 발생 시 마우스 포인터의 가로 좌표 반환), 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!