HTML5 터치 이벤트

본 글은 HTML5의 실제 전투와 터치 이벤트 분석을 주로 소개하고 있으니 필요하신 분들은 참고하시기 바랍니다.

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

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

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

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

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

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

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

　clientX: 뷰포트에 있는 터치 대상의 x 좌표입니다.
　clientY: 뷰포트에서 터치 대상의 y 좌표입니다.
　식별자:터치를 식별하는 고유 ID입니다.
　pageX: 페이지 내 터치 대상의 x 좌표입니다.
　pageY: 페이지에서 터치 대상의 y 좌표입니다.
　screenX: 화면에 있는 터치 대상의 x 좌표입니다.
　screenY: 화면에서 터치 대상의 y 좌표입니다.
　target: 눈에 띄는 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 코드

<p id="inp"></p>

　 위의 작은 예입니다. touchstart 이벤트가 트리거되면 터치 위치가 p 태그로 업데이트됩니다. touchmove 이벤트가 트리거되면 기본 동작은 스크롤(터치 동작의 기본 동작은 페이지 스크롤)이며, 터치 동작의 변경 정보가 p 태그에 업데이트됩니다. 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도 터치 이벤트를 지원합니다.

위 내용은 이 글의 전체 내용입니다. 여러분의 학습에 도움이 되길 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해 주세요.

위 내용은 HTML5 터치 이벤트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!