js의 터치 이벤트에 대한 실제 참조

모바일 페이지의 터치스크린 슬라이딩 이벤트를 조사하는 것은 jquery의 해당 기술 지원을 검색하는 데 매우 지루한 반면, js에서는 이를 정의하는 데 몇 가지 간단한 단계만 필요합니다. js의.

처음 프론트엔드 페이지 작업을 시작했을 때 js를 접하게 되었는데, 그 이후로 간단하고 효율적인 jquery에 매료되어 계속 사용해 왔습니다.

js의 경우 기본 기술이라 주관적으로 포기했습니다.

지난 며칠간 모바일 페이지에서 터치스크린 슬라이딩 이벤트를 연구하면서 jquery의 해당 기술 지원을 검색하는 것이 정말 지루합니다(물론 이해가 안 될 수도 있습니다). jquery는 충분합니다. js는 몇 단계만 거치면 됩니다.

저는 js에 대해 잘 모르기 때문에 가장 간단한 애플리케이션을 오랫동안 시도해 보았습니다... js touch 이벤트의 실제 참고 자료를 공유하겠습니다:

$(function(){
document.addEventListener("touchmove", _touch, false);
})

function _touch(event){
alert(1);
}

위 코드는 필연적으로 jquery의 내용을 사용하므로 jquery를 사용하지 않는 분들은 무시하셔도 됩니다.

해당 이벤트는 다음과 같습니다.

touchstart: 손가락이 화면을 터치하면 트리거됩니다. 이미 화면에 손가락이 있어도 트리거됩니다.
터치무브: 손가락이 화면을 슬라이드할 때 지속적으로 트리거됩니다. 이 이벤트 중에 PreventDefault()를 호출하면 스크롤이 방지됩니다.
touchend: 화면에서 손가락을 떼면 트리거됩니다.
touchcancel: 시스템이 터치 추적을 중지하면 시작됩니다. 이 이벤트의 정확한 트리거링 이벤트는 문서에 명확하지 않습니다.

위 이벤트의 이벤트 객체에는 다음 속성이 존재합니다.

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

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

clientX: 뷰포트에 있는 터치 대상의 X 좌표입니다.
clientY: 뷰포트에 있는 터치 대상의 Y 좌표입니다.
식별자: 터치의 고유 ID를 나타냅니다.
pageX: 페이지 내 터치 대상의 x 좌표입니다.
pageY: 페이지 내 터치 대상의 y 좌표입니다.
screenX: 화면 터치 대상의 x 좌표입니다.
screenY: 화면 터치 대상의 y 좌표입니다.
대상: 터치된 DOM 노드 좌표

위 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요!